Hướng dẫn react-bootstrap get form values on submit - Reac-bootstrap nhận các giá trị biểu mẫu khi gửi

React JS Nhận giá trị biểu mẫu Bootstrap khi gửi. Hướng dẫn hướng dẫn này sẽ giải thích cho bạn một cách chi tiết về cách nhận các giá trị biểu mẫu Bootstrap khi gửi trong ứng dụng React JS.

Đôi khi, bạn làm việc trong ứng dụng React JS và muốn nhận dữ liệu hoặc giá trị biểu mẫu trên biểu mẫu Gửi trong ứng dụng React JS. Vì vậy, trong ví dụ này hướng dẫn sẽ học từng bước về cách nhận các giá trị biểu mẫu Bootstrap khi gửi trong ứng dụng React JS.

Cách nhận giá trị biểu mẫu khi gửi trong React JS

Chỉ cần làm theo các bước sau đây và nhận các giá trị biểu mẫu Bootstrap khi gửi trong ứng dụng React JS .:

• Bước 1 - Tạo ứng dụng React
• Bước 2 - Thiết lập Bootstrap 4
• Bước 3 - Tạo thành phần biểu mẫu
• Bước 4 - Thêm thành phần vào App.js

Bước 1 - Tạo ứng dụng React

Bước 2 - Thiết lập Bootstrap 4

npx create-react-app react-axios-tutorial

Bước 3 - Tạo thành phần biểu mẫu

npm start

Bước 4 - Thêm thành phần vào App.js

Bước 2 - Thiết lập Bootstrap 4

Bước 3 - Tạo thành phần biểu mẫu

npm install bootstrap --save

Bước 4 - Thêm thành phần vào App.jsbootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to Get Form Values On Submit in React JS</h2>
    </div>
  );
}

export default App;

Bước 3 - Tạo thành phần biểu mẫu

Bước 4 - Thêm thành phần vào App.js

import React from 'react'
class SimpleForm extends React.Component{
constructor(){
super();
this.state = {
first_name:null,
last_name:null,
email:null,
city:null,
address:null,
gender:null,
hobbies:[]
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
var value = target.value;
const name = target.name;
if(target.type === 'checkbox'){
if(target.checked){
this.state.hobbies[value] = value;   
}else{
this.state.hobbies.splice(value, 1);
}
}else{
this.setState({
[name]: value
});
}   
}
submit(){
console.warn(this.state)
}
render(){
return(
<div>
<div class="row">
<div class="col-md-6 offset-md-3">
<br /><br />
<h3>Register Form</h3><br />
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label>First Name :</label>
<input type="text" class="form-control" name="first_name" onChange={this.handleInputChange} />
</div>
<div class="form-group col-md-6">
<label>Last Name :</label>
<input type="text" class="form-control" name="last_name" onChange={this.handleInputChange} />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Email :</label>
<input type="email" class="form-control" name="email" onChange={this.handleInputChange} />
</div>
<div class="form-group col-md-6">
<label>City :</label>
<select class="form-control" name="city" onChange={this.handleInputChange}>
<option selected>Select City</option>
<option value="1">city 1</option>
<option value="2">city 2</option>
<option value="3">city 3</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Gender :</label><br />
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="inlineRadiom" value="male" checked={this.state.gender === "male"} onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineRadiom">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="inlineRadiof" value="female" checked={this.state.gender === "female"} onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineRadiof">Female</label>
</div>
</div>
<div class="form-group col-md-6">
<label>Hobbies :</label><br />
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh2" value="1" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh2">Reading</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh2" value="2" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh2">Developing</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="hobbies" id="inlineCheckboxh3" value="3" onChange={this.handleInputChange} />
<label class="form-check-label" for="inlineCheckboxh3">Desiging</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Address :</label>
<textarea name="address" class="form-control" onChange={this.handleInputChange} />
</div>
</div>
<div class="form-row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary" onClick={()=>this.submit()}>Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
)  
}
}
export default SimpleForm;

Bước 4 - Thêm thành phần vào App.js

Trong bước này, hãy mở thiết bị đầu cuối của bạn và thực hiện lệnh sau trên thiết bị đầu cuối của bạn để tạo ứng dụng React mới:SimpleForm.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import SimpleForm from './SimpleForm'
function App() {  
return (  
<div className="App">  
<SimpleForm/>  
</div>  
);  
}  
export default App;

Để chạy ứng dụng React, hãy thực hiện lệnh sau trên thiết bị đầu cuối của bạn:

Kiểm tra ứng dụng React của bạn trên url này: localhost: 3000

Trong bước này, thực hiện lệnh sau để cài đặt thư viện Boostrap 4 vào ứng dụng React của bạn: