Comment obtenir un onClick pour travailler dans une rangée - reactjs

J'essaye de faire un clic même de travailler avec une table en reactjs. Ma première tentative a été de rendre l'ensemble de la ligne cliquable. Voici mon code:

var UserList = React.createClass({
  getInitialState: function() {
    return getUsers();
  },
  handleClick: function(e) {
    console.log("clicked");
  },
  render: function() {
    var users = this.state.users.map(function(user) {
      return (
        <tr onClick={this.handleClick}>
          <td>{user.name}</td>
          <td>{user.age}</td>
          <td></td>
        </tr>
      );
    });
    return(
      <div className="container">
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              {users}
            </tbody>
        </table>
      </div>
    );
  }
});

Cela ne fonctionne pas. J'ai ensuite essayé d'ajouter un bouton dans le tableau:

<button className="btn" onClick={this.handleClick}>Full Detail</button>

Qui aussi n'a pas de travail. J'ai d'autres onClickde travail tout au long de mon application, mais comment puis-je faire ce travail avec une table?

source d'informationauteur jhamm | 2014-08-12

  1. 26

    Votre problème est la fonction de l'utilisateur qui crée la ligne de la table n'est pas lié à votre réagissent composant. La valeur de this ne sera pas votre réagissent composant et handleClick pas exister en tant que propriété de this.

    Essayer

    var users = this.state.users.map(function(user) {
  return (
    <tr onClick={this.handleClick}>
      <td>{user.name}</td>
      <td>{user.age}</td>
      <td></td>
    </tr>
  );}.bind(this);
});

    Ou de l'utilisation de Soulignement du lier si vous voulez qu'il fonctionne sur tous les navigateurs.

  2. 4

    Je suis nouveau à réagir. Comment à ce sujet? Vous venez de l'envelopper dans une autre fonction, alors que la fonction est titulaire de la fermeture de la portée et qu'elle appelle correctement.

    Aucune idée de si c'est une mauvaise pratique ou la différence de performances, mais il semble fonctionner...

    var users = this.state.users.map(function(user) {
  return (
    <tr onClick={()=>this.handleClick(user)}>
      <td>{user.name}</td>
      <td>{user.age}</td>
      <td></td>
    </tr>
  );}.bind(this);
});