Javascript 记忆游戏中的反应裁判

嗨，我是ReactJS的初学者，我正在用它做一个记忆游戏，在显示瓷砖方面有问题。 我希望在父组件的状态中有一些值，比如firstPick、secondPick、pickCount和isHidden（这将切换图标可见性）。 但把它放在父组件中会使单击每个平铺上的任何按钮切换图标。为了解决这个问题，我将isHidden属性移动到按钮（子）组件。现在我想从它的父组件操纵按钮的状态，所以我在internet的某个地方找到了有关使用引用的信息。但是使用它们会使单击每个按钮只切换容器中的最后一个按钮。我想我把事情搞砸了。 因此，我的按钮组件如下所示：

class按钮扩展组件{
state={ishiden:true}；
切换隐藏（）{
this.setState（{ishiden:！this.state.ishiden}）；
} 
render（）{
返回(
);
}
}

为什么不直接处理按钮本身的切换

class Button extends Component {
  state = {isHidden: true};

  toggleHidden () {
    this.setState({isHidden: !this.state.isHidden});
  }

  onClick = () => {
    this.toggleHidden();
    if (this.props.onClick) {
       this.props.onClick();
    }
  }

  render() {
    return (
      <div>
        <button className="tile" onClick={this.onClick}>
          <i
            className={this.props.icon}
            style={
              this.state.isHidden ? { display: "none" } : { display: "block" }
            }
          />
        </button>
      </div>
    );
  }
}

---

handleClick

现在变成了一个返回原始函数的函数（有一些额外的/独特的上下文，在本例中是

animalArray[0]

）。

我想说，您的项目的复杂性足以保证像flux或redux这样的存储来跟踪所有按钮属性。这通常是解决父元素和子元素之间复杂关系的解决方案

---

在我看来，REF应该只用于不受控制的组件，即页面上不在react中的任何元素。

react In也教了类似的内容。您可以只编写map函数来迭代所有按钮，而不需要使用ref，让react处理状态会很好。不，他们有3x3 this.renderSquare（）方法Anyway我的意思是如何将状态提升到父组件，并使用状态而不是引用。Link仅供参考。因为onClick事件已分配给this.props.onClick，我听说将onClick分配给两个事件处理程序是不可能的，或者不是一个好的做法。@OskarNawara如果要隐藏一个div，进行两次api调用并使另一个div可见？在这种情况下，您是否可以使用onclick作为捆绑onclick的方法？您尝试过吗？这个代码绝对是可能的。它并没有分配给两个处理程序，而是分配给一个处理程序，然后再传播给父处理程序。此模式没有问题。@DrazenBjelovuk我刚刚尝试过，得到了TypeError:无法读取的属性“toggleHidden”undefined@OskarNawara啊对。将onClick转换为arrow函数以保留这一点。（请参阅更新）好的，那么我可能会在其中添加Redux。感谢您的建议这与保证重复使用的复杂程度不同。@DrazenBjelovuk如果确实需要父组件更改其子组件的状态，我会说是的。

handleClick = (icon) => () => {
  this.buttonElement.current.toggleHidden();
  this.setState({
    firstPick: icon,
    pickCount: this.state.pickCount + 1
  });
  alert(this.state.firstPick);
};

render() {
  return (
    <div className="board">
      <div className="container">
        <div className="row align-items-start">
          <div className="col-3">
            <Button
              ref={this.buttonElement}
              icon={animalArray[0]}
              onClick={this.handleClick(animalArray[0])}
            />