💻
React - The Complete Guide (incl Hooks, React Rout
  • What you'll learn
  • Getting Started
    • Introduction
    • What is React
    • Learning Community
    • Components
    • Writing our First React Code
    • Why Should we Choose React
    • React Alternatives
    • SPA and MPA
      • Single Page Applications
      • Multi Page Applications
    • Course Outline
    • How to get the Most out of This Course
    • Useful Resources & Links
  • Two kinds of application
  • Hiều về let và const
  • Arrow Functions
  • Export và Import
  • Hiểu các tính năng cơ bản & Cú pháp
    • Module Introduction
    • The Build Workflow
    • Node.js Download
    • Using Create React App
    • Understanding the Folder Structure
    • Understanding Component Basics
    • Understanding JSX
    • JSX Restrictions
    • Creating a Functional Component
    • Components & JSX Cheat Sheet
    • Working with Components & Re-Using Them
    • Outputting Dynamic Content
    • Working with Props
    • Understanding the "children" Pro
    • Understanding & Using State
    • Props & State
    • Xử lý các sự kiện bằng các phương thức
    • Bạn có thể nghe những sự kiện nào?
    • Xử lý State
    • Đặt tên Function Components
    • Sử dụng useState() Hook cho xử lý State
    • Stateless vs Stateful Components
    • Truyền Method References giữa các Component
    • Liên kết hai chiều(Two-way Binding)
    • Thêm Styling với Stylesheets
    • Làm việc với Inline Styles
    • Tài nguyên & Liên kết hữu ích
Powered by GitBook
On this page

Was this helpful?

  1. Hiểu các tính năng cơ bản & Cú pháp

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

PreviousTruyền Method References giữa các ComponentNextThêm Styling với Stylesheets

Last updated 4 years ago

Was this helpful?

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