如何让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>
    );
  }
});

var UserList=React.createClass({
getInitialState:函数（）{
返回getUsers（）；
},
handleClick:函数（e）{
控制台日志（“单击”）；
},
render:function（）{
var users=this.state.users.map（函数（用户）{
返回(
{user.name}
{user.age}
);
});
返回(
名称
年龄
全部细节
{用户}
);
}
});

这不起作用。然后我尝试在表中添加一个按钮：

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

全部细节

---

这也不起作用。我的应用程序中有其他

onClick

，但是如何使它与表一起工作？

您的问题是创建表行的用户的功能没有绑定到您的react组件。

this

的值将不是您的react组件，handleClick将不作为

this

的属性存在

试一试

var users=this.state.users.map（函数（用户）{
返回(
{user.name}
{user.age}
)绑定（这个）；
});

---

如果希望下划线绑定在所有浏览器上都能使用，也可以使用下划线绑定。

我是个新手。这个怎么样？您只需将其包装在另一个函数中，然后该函数将保留闭包作用域并正确调用它

不知道这是坏习惯还是性能差异，但它似乎起作用了

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

var users=this.state.users.map（函数（用户）{
返回(
this.handleClick（用户）}>
{user.name}
{user.age}
)绑定（这个）；
});

绑定创建一个新对象。因此，如果为N个员工绑定函数，则创建N个新函数的效率很低。更优雅的方法是绑定函数一次，并将引用传递给每一行。您的原始代码非常接近。这是我的建议：

 handleClick = e => {
    const user = this.state.users.find(u => u.uuid == e.target.dataset.uui)
    console.log("clicked");
  },
  render() {
    return(
      <div className="container">
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              {this.state.users.map(user => 
                (
                 <tr data-uuid={user.uuid} onClick={this.handleClick}>
                   <td>{user.name}</td>
                   <td>{user.age}</td>
                    <td>{user.details || ''}</td>      
                 </tr>
                )
              )}
  
            </tbody>
        </table>
      </div>
    );
  }
});

handleClick=e=>{
const user=this.state.users.find（u=>u.uuid==e.target.dataset.uui）
控制台日志（“单击”）；
},
render（）{
返回(
名称
年龄
全部细节
{this.state.users.map（user=>
(
{user.name}
{user.age}
{user.details | |'''}
)
)}
);
}
});

这完全有道理。我不明白最后一句话，“如果你想让它在所有浏览器上都能工作，就用用户下划线绑定”吗？你能给我举个例子吗？.bind在旧浏览器中不受支持。下划线是一个受欢迎的库，它在许多方面为旧浏览器添加了绑定支持。另外，如果您想知道单击了哪个用户行，可以将其作为另一个参数添加到绑定：

。绑定（this，user）

，并将单击处理程序修改为：

handleClick:function（user，e）{

。感谢您的帮助，很抱歉它太旧了，但是要添加到@joakimbeng解决方案中，在onclick上它应该是这样的：

onclick={（e）=>this.props.onSelect（e，user）}

结果表明，这通常是一种不好的做法，尤其是在具有大量行的数据集中，因为在只有一个函数就足够的情况下，会生成n个函数。我将把它作为一个例子，说明在每个渲染上不在子道具中添加新函数是一种不好的做法，因为这将永远改变虚拟dom状态因此，react必须在父级（表）的每个渲染上重新渲染子组件（tr）。

 handleClick = e => {
    const user = this.state.users.find(u => u.uuid == e.target.dataset.uui)
    console.log("clicked");
  },
  render() {
    return(
      <div className="container">
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Full Detail</th>
            </tr>
          </thead>
            <tbody>
              {this.state.users.map(user => 
                (
                 <tr data-uuid={user.uuid} onClick={this.handleClick}>
                   <td>{user.name}</td>
                   <td>{user.age}</td>
                    <td>{user.details || ''}</td>      
                 </tr>
                )
              )}
  
            </tbody>
        </table>
      </div>
    );
  }
});