Hướng dẫn react-bootstrap form submit get value - biểu mẫu phản ứng-bootstrap gửi nhận giá trị

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 [
    

      
How to Get Form Values On Submit in React JS
    
  ];
}

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[






Register Form





First Name :



Last Name :





Email :



City :

Select City
city 1
city 2
city 3





Gender :



Male



Female



Hobbies :



Reading



Developing



Desiging





Address :





this.submit[]}>Submit






]  
}
}
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 [  
  
  
  
];  
}  
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: