Question

这就是我正在从事的工作：

https://codepen.io/nisofwareengineer/pen/dybeObW?editors=0110

我想发生的事情：

父母=董事会，儿童=正方形

单击九个框中的任何一个之后，父组件状态的播放器变量应从1更改为2。这意味着当播放器变量为1且O为0时，单击其中一个框时，将显示X。当玩家变量为2时，单击其中一个框时显示。

这需要通过孩子完成

遵循此https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react

我已完成以下操作：

在父委员会中：

this.changePlayer = this.changePlayer.bind(this)

changePlayer(){
    this.setState({
     player: this.state.player == 1 ? 2 : 1  
    })
  }

renderSquare(i) {
    return <Square value={i} player={this.state.player} changePlayer = {this.changePlayer} />;
  }

和儿童广场：

render() {
    return (
      <button
        className="square"
        onClick={() => {
          this.setState({
            value:
              this.state.value == "" && this.props.player == 1
                ? "X"
                : (this.state.value == "" && this.props.player == 2 ? "O" : ""),
          });
          this.props.changePlayer

        } }
      >

我希望所传递的方法changePlayer将允许在单击子组件的任何按钮时更改父状态var播放器

不幸的是，这似乎不起作用。

Answer 1

问题是您需要在事件中仅调用this.props.changePlayer，因为this.props.changePlayer是一个函数。由于您还需要在onClick事件中执行其他操作，因此可以使用onMouseUp作为更改播放器的替代方法。您可以这样解决：

<button
    className="square"
    onClick={() => {
      this.setState({
        value:
          this.state.value == "" && this.props.player == 1
            ? "X"
            : (this.state.value == "" && this.props.player == 2 ? "O" : ""),
        player: this.props.player == 1 ? 2 : 1
      });                 
    } }
    onMouseUp={this.props.changePlayer}
  >
    {this.state.value}
  </button>

最正确的方法是使用redux，因为在反应中不应将数据从子级传递到父级。

Answer 2

在父母中：

changePlayer(value) {
    this.setState({
      player: value === 1 ? 2 : 1
    })
  }

在孩子中：

      render() {
    return <button
      className="square"
      onClick={() => {
    let val = this.state.value === "" && this.props.player === 1 ? "X" : (this.state.value === "" && this.props.player === 2 ? "O" : "")
    this.props.changePlayer(val)
      }}>button</button>
  }

如何通过子组件更改父组件状态的值？

2 个答案: