删除函数中的点击事件

Question

我正在制作反应测验应用程序，但遇到了一些麻烦。我想这样做：我有一个存储值 1 或 2 的按钮，它有 onclick 函数来检查单击按钮的值是否为 1，加一分来得分。如果单击它，我需要从此按钮中删除单击事件，仅从此按钮中删除。 我不知道该怎么做。请帮帮我 代码：

class Quiz extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {score: 0}
    
    this.checkBtn = this.checkBtn.bind(this);
  }
  
 
  
  checkBtn(e) {
 
    if (e.target.value == "1") {
      this.setState({score: this.state.score+1});
window.removeEventListener('click', this.checkBtn, true); // here i need remove listener
    }
  
  }
  
  render() {
    const { disableButton } = this.state;
    return (
      <div>
        <button value="1" onClick={this.checkBtn}>first</button>
         <button value="2" onClick={this.checkBtn}>second</button>
        
          <button value="1" onClick={this.checkBtn}>first</button>
         <button value="2" onClick={this.checkBtn}>second</button>
        
        <p>{this.state.score}</p>
        </div>
    );
  }
}

const Root = document.getElementById("root");
ReactDOM.render(<Quiz />, Root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

把这个按钮变成一个功能元素。在那里，您可以设置 UI 状态（例如，禁用：false），然后使用禁用状态渲染元素以有条件地渲染您的组件，如下所示：

if(state.disabled){
return (your button JSX without the onClick event);
} else {
return (your button JSX with the onClick event);
}

您可以使用 onClickHandler 来完成按钮工作并设置状态以移除 onClick 事件。

Answer 2

这是一个相当好的问题，但我认为要使方法尽可能接近惯用的 React，您需要考虑传递道具，而不是添加或删除事件侦听器。在你的情况下，是这样的：

class Quiz extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      disableButton: false,
      score: 0
    };

    this.checkBtn = this.checkBtn.bind(this);
  }

  checkBtn(e) {
    if (e.target.value === "1") {
      this.setState(state => ({
        disableButton: true,
        score: state.score + 1
      }));
    }
  }

  render() {
    const { disableButton } = this.state;
    return (
      <div>
        <button value="1" onClick={!disableButton && this.checkBtn}>
          first
        </button>
        <button value="2" onClick={!disableButton && this.checkBtn}>
          second
        </button>

        <button value="1" onClick={!disableButton && this.checkBtn}>
          first
        </button>
        <button value="2" onClick={!disableButton && this.checkBtn}>
          second
        </button>

        <p>{this.state.score}</p>
      </div>
    );
  }
}

所以你已经足够接近了。查看the Codepen 了解其工作原理。

我不完全确定这是否真的是一个完整的解决方案，但至少我希望能帮助您继续前进。

Answer 3

您无法在 React 中移除事件监听器，但您可以根据状态告诉它要运行哪个函数。听起来如果分数为 1，您不希望用户能够使用一个值激活按钮上的功能，因为我会将您的渲染功能更改为以下内容；

render() {
    const { disableButton } = this.state;
    return (
      <div>
        <button value="1" onClick={this.state.score === 1 ? () => {} : this.checkBtn}>first</button>
         <button value="2" onClick={this.checkBtn}>second</button>

          <button value="1" onClick={this.state.score === 1 ? () => {} : this.checkBtn}>first</button>
         <button value="2" onClick={this.checkBtn}>second</button>

        <p>{this.state.score}</p>
        </div>
    );
  }

这样，如果分数为 1，它将运行一个什么都不做的匿名函数，否则它将运行 checkBtn