Làm việc với Form trong React.js

Trong HTML form thông thường, element tự giữ giá trị và submit khi bấm nút. Mặc định navigate sang trang mới sau submit.

Ví dụ HTML Form

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

React dùng Controlled Components: state React là "single source of truth". Input value đồng bộ với state qua onChange.

Controlled Component - Username

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(); // Ngăn reload page
  }
  render() {
    return (
      <form onSubmit={this.handleFormSubmit}>
        <label>
          Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Xử lý nhiều input với 1 handler:

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

Lưu ý:

• Controlled input cần default value từ state (tránh null warning)
• Uncontrolled component: input type="file" (read-only, chỉ lấy giá trị khi submit)
• Thư viện phổ biến: Formik, React Hook Form - validation, feedback, performance tốt hơn
• Hooks hiện nay: dùng useState, useRef thay class component