Reactjs Stateup - Tìm hiểu chi tiết về thông tin ReasctjS

Để thu thập dữ liệu từ nhiều thành phần con hoặc để hai thành phần con giao tiếp với nhau, thay vào đó, bạn cần khai báo trạng thái chia sẻ trong thành phần cha của chúng. Thành phần cha mẹ có thể chuyển trạng thái trở lại thành phần con bằng cách sử dụng đạo cụ; điều này giữ cho các thành phần con đồng bộ với nhau và với thành phần cha.

Việc nâng trạng thái lên thành phần gốc là điều phổ biến khi tái cấu trúc các thành phần React - hãy tận dụng cơ hội này để dùng thử.

Thêm một hàm tạo vào Board và đặt trạng thái ban đầu của Board chứa một mảng gồm 9 giá trị rỗng tương ứng với 9 ô vuông:

class Board extends React.Component {
  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),    };  }
  renderSquare(i) {
    return <Square value={i} />;
  }

Khi chúng ta điền vào bảng sau, this.state.squaresmảng sẽ trông giống như thế này:

[
  'O', null, 'X',
  'X', 'X', 'O',
  'O', null, null,
]

Phương pháp của Hội đồng renderSquarehiện tại trông như thế này:

  renderSquare(i) {
    return <Square value={i} />;
  }

Lúc đầu, chúng tôi chuyểnvalue phần chống đỡ từ Bảng xuống để hiển thị các số từ 0 đến 8 ở mỗi Ô. Ở bước khác trước đó, chúng tôi đã thay thế các số bằng dấu “X” được xác định bởi trạng thái của chính Square . Đây là lý do tại sao Square hiện đang bỏ qua valueđề xuất được Hội đồng quản trị thông qua.

Bây giờ chúng ta sẽ sử dụng lại cơ chế truyền prop. Chúng tôi sẽ sửa đổi Bảng để hướng dẫn từng Hình vuông riêng lẻ về giá trị hiện tại của nó ( 'X', 'O', hoặc null). Chúng ta đã định nghĩa squaresmảng trong hàm tạo của Board và chúng ta sẽ sửa đổi renderSquarephương thức của Board để đọc từ nó:

  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;  }

Xem mã đầy đủ tại thời điểm này

Mỗi Hình vuông bây giờ sẽ nhận được một valuechỗ dựa sẽ là 'X', 'O'hoặc nullcho các hình vuông trống.

Tiếp theo, chúng ta cần thay đổi điều xảy ra khi người ta nhấp vào Hình vuông. Thành phần Board hiện duy trì các ô vuông đã được lấp đầy. Chúng ta cần tạo một cách để Square cập nhật trạng thái của Board. Vì trạng thái được coi là riêng tư đối với thành phần xác định nó nên chúng tôi không thể cập nhật trạng thái của Board trực tiếp từ Square.

Thay vào đó, chúng ta sẽ chuyển một hàm từ Bảng sang Quảng trường và chúng ta sẽ yêu cầu Square gọi hàm đó khi nhấp vào một hình vuông. Chúng ta sẽ thay đổi renderSquarephương thức trong Board thành:

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}      />
    );
  }

class Square extends React.Component {  render() {    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}      >
        {this.props.value}      </button>
    );
  }
}