Liên kết hai chiều(Two-way Binding)

Liên kết hai chiều có nghĩa là mọi thay đổi liên quan đến dữ liệu ảnh hưởng đến mô hình sẽ được truyền ngay lập tức đến (các) chế độ xem phù hợp và mọi thay đổi được thực hiện trong chế độ xem (giả sử) của người dùng) sẽ được phản ánh ngay lập tức trong mô hình bên dưới . Khi dữ liệu ứng dụng thay đổi, UI cũng vậy và ngược lại.

Component Cha

const ParentComponent = () => {
  const [color,setColor]=useState('red');
  
  const changeColor = (newColor) => {
  setColor(newColor);
  };
  
  return (
    <ChildComponent changeColor={changeColor}/>
  );
};

Component Con

const ChildComponent = (props) => {
  const {changeColor}=props;
  
  const handleClick = (e) => {
  changeColor(e.target.value);
  };
  
  return (
    <button value={'red'} onClick={handleClick}>Red</button>
    <button value={'green'} onClick={handleClick}>Green</button>
    <button value={'blue'} onClick={handleClick}>Blue</button>
  );
};

Chúng tôi sẽ sử dụng prop changeColor trong hàm handleClick để cập nhật màu sắc.

changeColor là props được truyền từ ParentComponent. Chúng ta sẽ gửi cho nó giá trị của nút bấm. Bây giờ khi bạn nhấp vào một trong các nút từ ChildComponent, nó sẽ cập nhật trạng thái màu từ ParentComponent. Chúng ta vừa thực hiện liên kết dữ liệu hai chiều với ReactJS