Question

嗨，我是ReactJS的初学者，我正在用它做一个记忆游戏，但在显示图块时遇到了问题。我希望在父组件的状态中具有一些值，例如firstPick，secondPick，pickCount和isHidden（这将切换图标可见性）。但是将其放在父组件中会使单击每个图块上的任何按钮切换图标。为了解决这个问题，我将isHidden属性移到了Button（子）组件。现在，我想从其父组件中操纵Button的状态，因此我找到了有关在Internet上某处使用引用的信息。但是使用它们会使单击每个按钮仅切换容器中的最后一个按钮。我想我弄乱了。所以我的Button组件看起来像这样：

class Button extends Component {
  state = {isHidden: true};

  toggleHidden () {
    this.setState({isHidden: !this.state.isHidden});
  } 

  render() {
    return (
      <div>
        <button className="tile" onClick={this.props.onClick}>
          <i
            className={this.props.icon}
            style={
              this.state.isHidden ? { display: "none" } : { display: "block" }
            }
          />
        </button>
      </div>
    );
  }
}

我的董事会组件如下所示：

class Board extends Component {
  state = { firstPick: "", secondPick: "", pickCount: 0 };
  constructor(props) {
    super(props);
    this.buttonElement = React.createRef();
  }

  handleClick = () => {
    this.buttonElement.current.toggleHidden();
    this.setState({
      firstPick: this.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}
              />

当然，这里还有11个其他Button组件，但是它们看起来一样。（顺便说一句，有没有一种方法可以不重复此代码？它们放置在引导容器中）。我也有1个奖金问题。有没有一种方法可以将state.firstPick设置为icon属性？我不知道如何从父组件方法中引用此值。我尝试编写this.icon，但我认为它不起作用。我想在状态变量中保留两个选择，然后进行比较。还是有解决这个问题的更好方法？谢谢

Answer 1

为什么不只处理按钮本身的切换？

func3()

更新：要保留func1()的唯一引用，您可以将func3()包装在另一个函数中：

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>
    );
  }
}

firstPick现在变成一个函数，该函数返回原始函数（具有一些额外/唯一的上下文，在这种情况下为handleClick）。

Answer 2

我要说的是，您的项目非常复杂，足以保证需要使用诸如flux或redux之类的商店来跟踪所有按钮属性。通常，这是解决父元素和子元素之间复杂关系的解决方案。

我认为，引用仅应用于不受控制的组件，也就是说，页面上所有没有反应的元素。

在记忆游戏中反应裁判

2 个答案: