Как обновить один дочерний компонент самостоятельно в React Js

Question

Я делал реактивную версию игры Bin go. Я добавил 25 кнопок, которые являются дочерними компонентами. Изначально у меня есть пустые значения в каждой кнопке. Затем при каждом нажатии я пытался обновить значения нажатой кнопки с 1 до 25. Но когда я нажимаю одну кнопку, чтобы обновить метку кнопки, все значения кнопки обновляются. Кто-нибудь может подсказать причину этого?

Приложение. js

import React from "react";
import "./styles.css";
import GameContainerOne from "./GameContainerOne";

export default function App() {
  return (
    <div className="App">
      <GameContainerOne />
    </div>
  );
}

GameContainerOne. js

import React from "react";
import ButtonBox from "./ButtonBox";

class GameContainerOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btnLabel: 0
    };
  }
  handleClicked = () => {
    if (this.state.btnLabel < 25) {
      this.setState({ btnLabel: ++this.state.btnLabel });
      console.log("after", this.state.btnLabel);
    }
  };
  render() {
    let menuItems = [];
    let key = 0;
    for (let i = 0; i < 5; i++) {
      for (let j = 0; j < 5; j++) {
        let index = "" + i + j;
        // console.log(index)
        key++;
        menuItems.push(
          <ButtonBox
            key={key}
            index={index}
            value={this.state.btnLabel}
            handleClicked={this.handleClicked.bind(this)}
          />
        );
      }
    }
    return <div className="wrapper">{menuItems}</div>;
    // this.handleButtonBox()
  }
}
export default GameContainerOne;

ButtonBox. js

import React from "react";
import Button from "@material-ui/core/Button";

class ButtonBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialBtnColor: "Default",
      selectedBtnColor: "Primary"
    };
  }

  handleClick = () => {
    // console.log("before",this.state.btnLabel)

    this.setState({ initialBtnColor: "Primary" });
    return this.props.handleClicked;
  };

  render() {
    console.log("Key=", this.props);
    //   const { index } = this.props.index;
    console.log("Key=", this.props.index);
    return (
      <div>
        <Button
          variant="contained"
          color={this.state.initialBtnColor}
          onClick={this.props.handleClicked}
        >
          {this.props.value}
        </Button>
      </div>
    );
  }
}
export default ButtonBox;

Пожалуйста, найдите ссылку на коды и ссылки: https://codesandbox.io/s/bingo-game-glk8v

Answer 1

Переместить состояние btnLabel в ButtonBox.

Пример (с использованием хуков):

// ButtonBox.js

import React from "react";
import Button from "@material-ui/core/Button";

function ButtonBox(props) {
  const [buttonColor, setButtonColor] = React.useState("Default");
  const [value, setValue] = React.useState(props.startValue);
  return (
    <div>
      <Button
        variant="contained"
        color={buttonColor}
        onClick={() => {
          setValue(value + 1);
          setButtonColor("Primary");
          props.handleClicked(props.index);
        }}
      >
        {value}
      </Button>
    </div>
  );
}

export default ButtonBox;

// GameContainerOne.js

import React from "react";
import ButtonBox from "./ButtonBox";

function GameContainerOne(props) {
  const handleClicked = React.useCallback(btnIndex => {
    // Called after a button is clicked
  }, []);
  let menuItems = [];
  let key = 0;
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
      let index = "" + i + j;
      key++;
      menuItems.push(
        <ButtonBox
          key={key}
          index={index}
          startValue={0}
          handleClicked={handleClicked}
        />
      );
    }
  }
  return <div className="wrapper">{menuItems}</div>;
}

export default GameContainerOne;

Answer 2

Вы изменяете состояние при нажатии, которое является источником меток для всех кнопок.

Вы можете иметь отдельное состояние для всех кнопок, чтобы избежать этого, и изменять их в зависимости от индекса на нажатой кнопке. .