javascript - React.Js : Prevent onClick-events of siblings while a onClick is executed

Question

解决以下问题的最佳实践是什么？

我有一个父组件(Board)和四个子组件(GameButton)，它们是可以单击的按钮。单击按钮会使按钮亮起 0.5 秒，然后将按钮恢复到初始样式。我想防止在一个按钮亮起时点击其他按钮。

class GameButton extends React.Component {
    constructor(){
    super();
    this.state = {
      illuminated:false,
    };
    this.playButton = this.playButton.bind(this);
  }

  playButton(){

    if (this.props.gameActive && this.props.clickable){
      // lock all other buttons until this function is done executing
      this.props.toggleButtonAccess();
      console.log(this.props.clickable);

      // pass the second state update in a callback function to ensure delayed execution
      this.setState({illuminated:true}, function() {
        // arrow function to prevent binding of this to window
      window.setTimeout(() => {
        this.setState({illuminated: false});
        this.props.toggleButtonAccess();
        console.log(this.props.clickable);

      },500);
      });
    }

  }
  render() {
    var buttonStyle = this.props.colorClass; 
    if (this.state.illuminated){
      buttonStyle += " illuminated-" + this.props.color;
      console.log(buttonStyle);
    }
    return (
        <div className={buttonStyle} onClick={this.playButton}></div>
    );
  }
}


class Board extends React.Component {
  constructor(){
    super();
    this.state = {
      gameActive:true,
    };
    this.toggleButtonAccess = this.toggleButtonAccess.bind(this);
  }

  toggleButtonAccess(){
    this.clickable = (this.clickable) ? false : true;
  }

  render() {
    return (
      <div className ="game-container">
       <GameButton colorClass="game-btn green" color="green" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
        <GameButton colorClass="game-btn red" color="red" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
       <GameButton colorClass="game-btn yellow" color="yellow" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
       <GameButton colorClass="game-btn blue" color="blue" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>

      </div>
    );
  }
}

到目前为止，我尝试通过在父(板)组件上设置属性 this.clickable 来实现此目的，然后每次单击按钮时使用 toggleAccessButton( )。然而，这是行不通的。有一个更好的方法吗？

Answer 1

您需要更改一些内容。首先，在 GameButton 中，我没有看到 gameActive 的值(value)。事实上，您没有向此 Prop 传递任何值。如果它没有您在此处未提及的任何其他用途，只需将其删除即可。

class GameButton extends React.Component {
    constructor(){
    super();
    this.state = {
      illuminated:false,
    };
    this.playButton = this.playButton.bind(this);
  }

  playButton(){

    if (this.props.clickable){
      // lock all other buttons until this function is done executing
      this.props.toggleButtonAccess();
      console.log(this.props.clickable);

      // pass the second state update in a callback function to ensure delayed execution
      this.setState({illuminated:true}, function() {
        // arrow function to prevent binding of this to window
      window.setTimeout(() => {
        this.setState({illuminated: false});
        this.props.toggleButtonAccess();
        console.log(this.props.clickable);

      },500);
      });
    }

  }
  render() {
    var buttonStyle = this.props.colorClass; 
    if (this.state.illuminated){
      buttonStyle += " illuminated-" + this.props.color;
      console.log(buttonStyle);
    }
    return (
        <div className={buttonStyle} onClick={this.playButton}></div>
    );
  }
}

现在在 Board 组件中，您需要保持 clickable 处于状态，并使用 setState 在 toggleButtonAccess 中更改它。这里我也不明白为什么你的状态是 gameActive 。

class Board extends React.Component {
  constructor(){
    super();
    this.state = {
      gameActive:true,
      clickable:true
    };
    this.toggleButtonAccess = this.toggleButtonAccess.bind(this);
  }

  toggleButtonAccess(){
    this.setState({clickable:!this.state.clickable});
  }

  render() {
    return (
      <div className ="game-container">
       <GameButton colorClass="game-btn green" color="green" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
        <GameButton colorClass="game-btn red" color="red" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
       <GameButton colorClass="game-btn yellow" color="yellow" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
       <GameButton colorClass="game-btn blue" color="blue" clickable={this.clickable} toggleButtonAccess={this.toggleButtonAccess}/>
      </div>
    );
  }
}

假设您已正确设置其他内容，它现在应该可以按预期工作。