Trong React uncontrolled component là gì?

Uncontrolled component trong React là một mẫu component mà trạng thái của nó không được quản lý bởi React. Trong uncontrolled components, dữ liệu form như giá trị của một input được xử lý bởi DOM thay vì bởi state trong component. Điều này có nghĩa là bạn sử dụng DOM như là "nguồn sự thật" để lấy giá trị hiện tại của input, thay vì lưu trữ giá trị đó trong state.

Cách Sử Dụng Uncontrolled Components

Để tạo một uncontrolled component, bạn thường sử dụng ref để truy cập trực tiếp đến phần tử DOM, thay vì sử dụng state và props để kiểm soát các sự kiện như onChange. ref được sử dụng để lấy giá trị từ form khi cần thiết, chẳng hạn như khi form được gửi đi.

Ví dụ:

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <inpu...