1
votes

Une fonction gère plusieurs boutons

Vous rencontrez des difficultés pour faire fonctionner ce code. Vous voulez simplement gérer chaque cas de bouton différemment en utilisant une fonction au lieu de 3 fonctions distinctes. Certaines réponses très anciennes de stackoverflow recommandaient d'utiliser un commutateur, mais je n'arrive pas à le faire fonctionner. Je n'obtiens aucune erreur avec le code ci-dessous, mais appuyer sur les boutons n'imprime rien à la console.

  myFunction = button => {
      var x = button.id;
      switch (x) {
          case 'All Saves':
              console.log('All Saves');
              break;
          case 'Threads':
              console.log('Threads');
              break;
          case 'Comments':
              console.log('Comments');
              break;
          default:
              return false;
      }
  }


  render () {
    return (
      <div className="container">
        <div className="btn-group">
          <button type="button" onClick={this.myFunction.bind(this)} id="All Saves">All Saves</button>
          <button type="button" onClick={this.myFunction.bind(this)} id="Threads">Threads</button>
          <button type="button" onClick={this.myFunction.bind(this)} id="Comments">Comments</button>
        </div>
      </div>
      ) 
  }

javascript reactjs button switch-statement

5 commentaires

Vous avez défini maFonction comme une variable, alors que vous définissez le gestionnaire de clics comme étant this.myFunction . Il n'y aura pas toujours la même chose.

Votre fonction est-elle appelée?

Que se passe-t-il lorsque vous console.log (x); ? Ou console.log (bouton) ?

@VLAZ Je ne suis pas sûr de vous avoir compris.

@SimonThiel Je m'attends à ce qu'il soit appelé au clic. Je ne l'appelle pas en dehors de ça.

3 Réponses :

2
votes

Vous avez oublié d'accéder à la propriété target de l'événement:

  myFunction = button => {
      var x = button.target.id;
      switch (x) {
          case 'All Saves':
              console.log('All Saves');
              break;
          case 'Threads':
              console.log('Threads');
              break;
          case 'Comments':
              console.log('Comments');
              break;
          default:
              return false;
      }
  }

5 commentaires

Renommer bouton en événement aurait également du sens.

C'est la convention.

Ou en utilisant ceci au lieu du bouton .

@VLAZ - Cela ne fonctionnera pas. Regardez ce que fait bind . Notez que bind est utilisé.

@Quentin ah, putain. J'ai oublié ça. Vous avez raison - le bind l'empêchera.

1
votes

appelez la fonction avec l'événement de clic:

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

class App extends React.Component {
  myFunction = event => {
    var x = event.target.id;
    switch (x) {
        case 'All Saves':
            console.log('All Saves');
            break;
        case 'Threads':
            console.log('Threads');
            break;
        case 'Comments':
            console.log('Comments');
            break;
        default:
            return false;
    }
}

  render() {
    return (
      <div className="container">
        <div className="btn-group">
          <button type="button" onClick={e => this.myFunction(e)} id="All Saves">All Saves</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Threads">Threads</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Comments">Comments</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

0
votes

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

class MyButtons extends React.Component {
  myFunction = event => {
    var x = event.target.id;
    switch (x) {
        case 'All Saves':
            console.log('All Saves');
            break;
        case 'Threads':
            console.log('Threads');
            break;
        case 'Comments':
            console.log('Comments');
            break;
        default:
            return false;
    }
}

  render() {
    return (
      <div className="container">
        <div className="btn-group">
          <button type="button" onClick={e => this.myFunction(e)} id="All Saves">All Saves</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Threads">Threads</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Comments">Comments</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<MyButtons />, document.getElementById("root"));

Voici l'exemple de travail pour votre problème

https://codesandbox.io/s/gifted-night-di8de?fontsize=14

0 commentaires