javascript - 在 react 中向 parent 提交参数的正确方法

Question

对于我可能犯的任何语言错误，我深表歉意。我不是母语人士

我有一个 React 组件，它从 API 获取数据，然后使用 Entrys.map 函数用这些条目填充表:

 render() {
    return (
        <div>
            <table>
                <thead>
                <tr>
                    <td>ID</td>
                    <td>username</td>
                    <td>name</td>
                </tr>
                </thead>
                <tbody>
                {this.state.users.map(user => <User key={user.userID} user={user} onClick={this.doSomething}/>)}
                </tbody>
            </table>
        </div>
    );
}

在子组件 User 中，我返回来自 API 的数据以及两个按钮，单击这些按钮应调用父组件的 doSomething 函数。

我正在寻找一种方法来调用该函数并发送参数，例如它所在的行以及单击了两个按钮中的哪一个。

我尝试使用 .bind() 函数将所需的参数发送到函数，但不是它所在的行，而且我无法在父组件中设置 State，因为 this 引用了我发送的参数。

<input type='button' className='btn btn-xs btn-info' onClick={this.props.changeState.bind("week")}/>

所以我现在的问题是，如果有办法的话，如何正确地将数据发送回父级。

Answer 1

在您的用户组件中，您可以使用像这样的绑定(bind)传递数据

<input type='button' className='btn btn-xs btn-info' onClick={this.props.onClick.bind(this, "pass the row data here")}/>

在你的父组件中，函数将是这样的

doSomething = (data) => { // use arrow function
  console.log(data) // should appear pass the row data here
}