-1
votes

Supprimer cliquez sur l'événement dans la fonction

Je fais une application de quiz réagit et j'ai des problèmes. Je veux faire comme ça: j'ai un bouton qui stocke la valeur 1 ou 2 et il a une fonction onclick qui vérifie si la valeur du bouton cliqué est 1, ajoutez un point à la score. S'il est cliqué, j'ai besoin de supprimer un événement Cliquez sur ce bouton uniquement. Je ne sais pas comment faire cela. Aidez-moi s'il vous plaît Code:

<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>

reactjs

2 commentaires

Dupliqué possible de Comment supprimer ou désactiver l'événement OnClick auditeur après un clic?

Où ajoutez-vous un écouteur d'événement de clic à l'objet de la fenêtre?

3 Réponses :

1
votes

Tournez ce bouton dans un élément fonctionnel. À l'intérieur, vous pouvez définir un état d'interface utilisateur (désactivé: FALSE, par exemple), puis vous rendant l'élément à l'aide de l'état Désactiver pour rendre conditionnellement votre composant, comme celui-ci:

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

1 commentaires

C'est comme ça que je le ferais.

0
votes

C'est une question assez bonne, mais je pense que l'approche aussi proche de l'idiomatique réagit que possible, vous devez penser en termes de passer des accessoires em>, sans ajouter ou supprimer des auditeurs d'événements. Dans votre cas, quelque chose comme ceci:

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

0 commentaires

0
votes

Vous ne pouvez pas supprimer un auditeur d'événement dans React mais vous pouvez le dire quelle fonction fonctionner en fonction de l'état. On dirait que si le score est 1, vous ne voulez pas que l'utilisateur puisse activer la fonction sur les boutons avec la seule valeur, car je modifierais votre fonction de rendu en ci-dessous;

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 commentaires

@RapproCrogTrainsite Il arrêtera le bouton exécutant la fonction, pas le désactiver. Qu'est-ce que vous attendez-vous?