从按钮中删除事件

Question

我有一个问题。我正在制作测验应用程序，但我不知道如何在单击后从按钮中删除单击事件。所以我有 4 个按钮，其中 2 个的值为 1，所以这将是正确的选择。当我点击这个值为 1 的按钮时，它只需要加 1 分即可得分，但我的代码在每次点击后加一分，我需要它，这样如果你点击了正确的选项，你就不能点击这个按钮，但你可以在另一个按钮上。我需要对每个值为 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});
      this.removeEventListener('click', this.checkBtn, true); // here i need remove listener
    }      
  }
  
  render() {
    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);

Answer 1

在“反应方式”中，您应该使用状态/引用/全局变量指示器而不是查询点击事件。

参考示例：

class Quiz extends React.Component {
  state = { score: 0 };
  isFirstButtonClicked = React.createRef(false);
  checkBtn = () => {
    if (!this.isFirstButtonClicked.current) {
      this.setState({ score: this.state.score + 1 });
    }
  };

  render() {
    return (
      <div>
        <button
          value="1"
          onClick={() => {
            this.checkBtn();
            this.isFirstButtonClicked.current = true;
          }}
        >
          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>
    );
  }
}

在您的情况下，this.removeEventListener 试图引用 removeEventListener 类函数 undefined。

Answer 2

这里有点技术性，但根据定义，一个按钮会触发一个动作，所以如果一个按钮不能做到这一点，它必须被禁用。

“当与按钮关联的操作不可用时，该按钮已将 aria-disabled 设置为 true。”

https://www.w3.org/TR/wai-aria-practices-1.1/#button

我知道这可能是一个有趣的项目，但如果不是，最好遵循这些约定。

另外，这是上面答案的修改版本： https://codesandbox.io/s/q-58255165-removeevent-105eu

Answer 3

import React from "react";

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

    this.state = {
      score: 0,
      first: "true",
      second: "true",
      third: "true",
      fourth: "true"
    };
    this.checkBtn = this.checkBtn.bind(this);
  }

  checkBtn(e) {
    if (e.target.id === "first") {
      if (e.target.value === "1" && this.state.first === "true") {
        this.setState({
          score: this.state.score + 1,
          first: false
        });
      }
    }
    if (e.target.id === "second") {
      if (e.target.value === "1" && this.state.second === "true") {
        this.setState({
          score: this.state.score + 1,
          second: false
        });
      }
    }
    if (e.target.id === "third") {
      if (e.target.value === "1" && this.state.third === "true") {
        this.setState({
          score: this.state.score + 1,
          third: false
        });
      }
    }
    if (e.target.id === "fourth") {
      if (e.target.value === "1" && this.state.fourth === "true") {
        this.setState({
          score: this.state.score + 1,
          fourth: false
        });
      }
    }
  }
  render() {
    return (
      <div>
        <button value="1" id="first" onClick={this.checkBtn}>
          First
        </button>
        <button value="2" id="second" onClick={this.checkBtn}>
          Second
        </button>
        <button value="1" id="third" onClick={this.checkBtn}>
          First
        </button>
        <button value="2" id="fourth" onClick={this.checkBtn}>
          Second
        </button>
        <p>{this.state.score}</p>
      </div>
    );
  }
}

export default App;

这里正确的选项可能会改变。在这种情况下，选项 1 和选项 3 是正确的。在另一种情况下，您可能有选项 2 和选项 4 正确。所以最好有 Id 或 Class 选项。以上代码适用于所有条件