Как заставить onClick работать в строке - reactjs

Я пытаюсь получить клик даже для работы со столом в reactjs. Моя первая попытка состояла в том, чтобы сделать целую строку нажатой. Вот мой код:

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

Это не сработало. Затем я попытался добавить в таблицу кнопку:

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

Это тоже не сработало. У меня есть другие onClick, работающие по всему моему приложению, но как это сделать с таблицей?

Ответ 1

Ваша проблема - это функция пользователя, которая создает строку таблицы, не привязана к вашему реагирующему компоненту. Значение this не будет вашим реагирующим компонентом, а handleClick не будет существовать как свойство this.

Try

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

Или используйте привязку Underscore, если вы хотите, чтобы она работала во всех браузерах.

Ответ 2

Я новичок в реакции. Как насчет этого? Вы просто переносите его в другую функцию, тогда эта функция содержит область закрытия и правильно ее вызывает.

Не знаю, если это плохая практика или разница в производительности, но она работает...

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