ในรูปแบบ html อย่างง่าย องค์ประกอบของแบบฟอร์มจะคงคุณค่าไว้ภายในและส่งผ่านปุ่มส่งแบบฟอร์ม
ตัวอย่าง
<!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>
ในตัวอย่างข้างต้น เรามีข้อมูลง่ายๆ ที่เรียกว่า username และเราสามารถรับค่าได้จากการส่งแบบฟอร์ม พฤติกรรมเริ่มต้นของแบบฟอร์ม html คือการนำทางไปยังหน้าใหม่ เช่น หน้าการส่งแบบฟอร์มโพสต์
แต่จะมีประโยชน์มากกว่าถ้าเรามีฟังก์ชัน JavaScript ตัวจัดการการส่งแบบฟอร์ม ซึ่งสามารถตรวจสอบข้อมูลในแบบฟอร์มได้เช่นกัน การตรวจสอบความถูกต้องจะให้ข้อเสนอแนะที่เกี่ยวข้องแก่ผู้ใช้
React มีเทคนิคในการจัดการการส่งแบบฟอร์มที่เรียกว่าเป็นส่วนประกอบควบคุม
เช่นเดียวกับใน html องค์ประกอบต่างๆ เช่น อินพุต พื้นที่ข้อความ ฯลฯ จะรักษาสถานะของตนเองและอัปเดตตามการกระทำของผู้ใช้ ใน React ฟิลด์ mutable จะถูกเก็บไว้กับ state object
การจัดการฟิลด์ชื่อผู้ใช้ในแนวทางของ 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>
);
}
} ที่นี่เรามีฟังก์ชันจัดการ onChange สำหรับอัปเดตชื่อผู้ใช้ของฟิลด์สถานะ
ใน formSubmit เราแค่แสดงบันทึกของคอนโซลในเบราว์เซอร์เพื่อแสดงชื่อผู้ใช้ที่ส่งมา
ส่วนประกอบควบคุมประเภทอื่นๆ ได้แก่ textarea, select tag , radio buttons เป็นต้น
มีองค์ประกอบบางอย่างที่ไม่สามารถควบคุมได้เช่นเดียวกับประเภทไฟล์ที่มีลักษณะอ่านอย่างเดียวและได้รับค่าของมันเมื่อส่งแบบฟอร์มเท่านั้น
การจัดการอินพุตหลายรูปแบบด้วยฟังก์ชัน JS เดียว -
handleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
} ควรหลีกเลี่ยงอินพุตที่ควบคุมด้วยค่า Null สำหรับฟิลด์โดยการระบุค่าเริ่มต้นสำหรับฟิลด์โดยใช้การเริ่มต้นของรัฐ
สำหรับโซลูชันเต็มรูปแบบในการจัดการแบบฟอร์มใน React สามารถทำได้โดยใช้ไลบรารีของบุคคลที่สามเช่น formik ง่ายต่อการใช้การตรวจสอบ คำติชมไปยังผู้ใช้ และอื่นๆ
