Controlled component trong React là gì?

Trong React, một controlled component là một component mà giá trị của nó được quản lý bởi React state. Điều này có nghĩa là, thay vì để DOM quản lý trạng thái của dữ liệu nhập (như trong HTML truyền thống), trong React, component chứa form (ví dụ: <input>, <textarea>, và <select>) sẽ lưu trữ trạng thái trong state và cập nhật nó dựa trên mỗi thay đổi từ người dùng thông qua sự kiện.

Đặc điểm của Controlled Component

• State Driven: Giá trị của form element (như input, select, textarea) được kiểm soát bởi state trong component React.
• Sự kiện cập nhật: Mỗi khi có sự thay đổi trong form element, một sự kiện (thường là onChange) sẽ được kích hoạt, và state sẽ được cập nhật dựa trên giá trị mới.
• Render dựa trên State: Component sẽ render lại mỗi khi state thay đổi, đảm bảo UI luôn đồng bộ với dữ liệu mới nhất.

Ví dụ

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange...