การทำงานกับ Forms ใน React.js

ใน HTML Form ธรรมดา Form Elements เก็บค่าไว้ภายในและ Submit เมื่อกดปุ่ม Submit

ตัวอย่าง

<!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>

พฤติกรรมเริ่มต้นของ HTML Form คือ Navigate ไปหน้าใหม่ (Post Form Submission Page)

แต่จะได้ประโยชน์มากขึ้นหากมี Form Submission Handler JavaScript Function ที่ Validate Form Data ได้ Validation จะให้ Feedback ที่เกี่ยวข้องกับ User

React มีเทคนิคจัดการ Form Submission เรียกว่า Controlled Components

ใน HTML Elements เช่น Input, Textarea เก็บ State ของตัวเองและ Update ตาม User Actions ใน React Mutable Fields ถูกเก็บไว้กับ State Object

การจัดการ Username Field แบบ Controlled Component ของ 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 Handler Function สำหรับ Update State Field Username

เมื่อ Form Submit แค่ Console Log แสดง Username ที่ Submit

Controlled Components อื่นๆ ได้แก่ Textarea, Select Tag, Radio Buttons เป็นต้น

มี Uncontrolled Components เช่น File Type เป็น Read-only ได้ค่าเฉพาะตอน Submit

จัดการ Multiple Form Inputs ด้วย Single JS Function

handleInputChange(event) {    const value = event.target.value;    const name = event.target.name;    this.setState({       [name]: value    }); }

Controlled Input ด้วย Null Value ควรหลีกเลี่ยง โดยให้ Default Value ผ่าน State Initialization

สำหรับ Full-scale Solutions การจัดการ Form ใน React ใช้ Third-party Libraries เช่น Formik ใช้ง่าย มี Validations, Feedback ให้ User และอื่นๆ