Question

假设我有一个如下所示的渲染函数：

  render() {


    var user_rows = []
    this.state.user_list.forEach(function (user, index){
        user_rows.push(
              <tr key={user}>
              <td><div className="btn-toolbar"><button type="button" onClick={this.editUser.(usesr.sso)} className="btn btn-success-outline">Edit</button></div></td>
            </tr>)
    }) 

return (<tbody>
        {user_rows}
      </tbody>)

我收到错误：

未捕获的TypeError：无法读取属性＆＃39; editUser＆＃39;未定义的

我想点击on：

1。创建组件时不运行，仅在实际点击时运行

2。正确绑定到此组件中的函数

我试过了： onClick={this.editUser.bind(null, user.sso)}，但在这种情况下似乎无效。

Answer 1

您所面临的问题是，传递给this的回调中的.forEach值并未指向您的React组件类，而是指向全局对象。

可能的解决方案：

1）将this的正确值作为第二个参数传递给.forEach。

this.state.user_list.forEach(function (user, index) {
    // your code
}, this);

2）如果您正在使用ES6，请使用箭头功能作为.forEach的第一个参数，它将自动使用正确的上下文。

this.state.user_list.forEach((user, index) => {
    // your code
});

解决此问题的另一种方法是使用.map函数将数组中的每个值映射到可在render()函数中使用的某些JSX。

const user_rows = this.state.user_list.map(user => 
     <tr key={user}>
         <td>
             <div className="btn-toolbar">
                 <button type="button" onClick={this.edituser[user.sso]} className="btn btn-success-outline">Edit</button>
             </div>
         </td>
     </tr>
);

Reactjs：将onClick绑定到动态创建的列表组件

1 个答案: