Trong biểu mẫu html đơn giản, các phần tử biểu mẫu giữ giá trị với nó bên trong và gửi trên nút gửi biểu mẫu.
Ví dụ
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
Trong ví dụ trên, chúng tôi có một đầu vào đơn giản được gọi là tên người dùng và chúng tôi có thể nhận giá trị của nó khi gửi biểu mẫu. Hành vi mặc định của biểu mẫu html là điều hướng đến trang mới, tức là trang gửi biểu mẫu bài đăng.
Nhưng nó có thể mang lại nhiều lợi thế hơn nếu chúng ta có một hàm JavaScript của trình xử lý gửi biểu mẫu, hàm này cũng có thể xác thực dữ liệu biểu mẫu. Việc xác thực sẽ cung cấp phản hồi có liên quan cho người dùng.
React có một kỹ thuật để xử lý việc gửi biểu mẫu được gọi là các thành phần được kiểm soát.
Như trong html, các phần tử như input, textarea, v.v. giữ trạng thái của riêng chúng và cập nhật dựa trên hành động của người dùng. Trong React, các trường có thể thay đổi được giữ với đối tượng trạng thái.
Xử lý trường tên người dùng trong phương pháp tiếp cận thành phần được kiểm soát của React -
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
} Ở đây chúng tôi có chức năng xử lý onChange để cập nhật tên người dùng trường trạng thái.
Trên formSubmit, chúng tôi chỉ hiển thị bảng điều khiển đăng nhập trình duyệt để hiển thị tên người dùng đã gửi.
Loại thành phần được kiểm soát khác là textarea, thẻ chọn, nút radio, v.v.
Có một số thành phần không được kiểm soát cũng như loại tệp chỉ được đọc trong tự nhiên và chỉ nhận được giá trị của chúng khi gửi biểu mẫu.
Xử lý nhiều đầu vào biểu mẫu với một hàm JS -
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
} Đầu vào được kiểm soát có giá trị null cho các trường nên tránh bằng cách cung cấp giá trị mặc định cho các trường bằng cách sử dụng trạng thái khởi tạo.
Đối với các giải pháp quy mô đầy đủ về xử lý biểu mẫu trong React có thể được thực hiện bằng cách sử dụng các thư viện của bên thứ ba như formik. Thật đơn giản để sử dụng xác thực, phản hồi cho người dùng và hơn thế nữa.