时间戳

首页 > 解决方案 > 在记忆游戏中反应参考

javascript - 在记忆游戏中反应参考

问题描述

嗨，我是 ReactJS 的初学者，我正在用它制作一个记忆游戏，但在显示瓷砖时遇到了问题。我想在父组件的状态中有一些值，比如 firstPick、secondPick、pickCount 和 isHidden（这会切换图标可见性）。但是将它放在父组件中会使单击每个图块上的任何按钮切换图标。为了解决这个问题，我将 isHidden 属性移到了 Button（子）组件。现在我想从它的父组件操纵 Button 的状态，所以我在互联网的某个地方找到了有关使用 refs 的信息。但是使用它们使得单击每个按钮只会切换容器中的最后一个按钮。我想我搞砸了。所以我的 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>
    );
  }
}

我的 Board 组件如下所示：

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 属性？我不知道如何从 Parent 组件方法中引用这个值。我尝试编写 this.icon，但我认为它不起作用。我想在状态变量中保留两个选择，然后比较它们。或者有没有更好的方法来解决这个问题？谢谢

标签： javascriptreactjs

解决方案

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

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在另一个函数中：

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])}
            />

handleClick现在成为一个返回原始函数的函数（在这种情况下具有一些额外/独特的上下文animalArray[0]）。

推荐阅读