reactjs - 如何从子组件获取数据到道具中传递的按钮的onclick？答案

【问题标题】：reactjs - how to get data from a child component into onclick of a button passed in props?reactjs - 如何从子组件获取数据到道具中传递的按钮的onclick？
【发布时间】：2016-02-10 10:10:05
【问题描述】：

我正在使用 ReactJS 和 ES2015

我通过 props 将一个按钮向下传递到子组件中。

我看不到如何从孩子那里获取数据到按钮的onClick函数中

谁能建议我需要做什么才能将子组件中的数据导入 onCLick 函数？

  doDeleteItem = (blah) => {
    console.log('the item to delete is: ', blah);
  };


  deleteButton = (
      <button
       className="btn btn-expand btn-stroke btn-success mr-5"
       type="primary"
       onClick={this.doDeleteItem}Delete item
     </button>
   )

   render() {
     return (
       <TableContainer
         deleteButton={this.deleteButton}
         doDeleteItem={this.doDeleteItem}
       />
     );

更新：cmets 说这有点不清楚。以下是上下文：

TableContainer 组件显示数据行。

我通过道具将 Button 组件向下推入 TableContainer。

TableContainer 呈现按钮。

我还向下推了一个函数，以便 Button 调用其 onClick 事件。

这个想法是用户选择表中的行，他们按下按钮（例如删除），按钮运行其 onClick 函数删除选定的行。

问题是我看不到如何将定义所选行的数据获取到 onClick 函数中。

看来onClick函数的“作用域”实际上是父组件，而不是TableContainer组件，所以它看不到定义用户选择删除哪些数据行的变量。

这样更清楚吗？如果没有，请告诉我。谢谢

【问题讨论】：

我正在编辑我自己的评论。您希望将 TableContainer 中的数据放入testButton？
你能扩展一下@Henrik吗？
有点不清楚。你需要这个 onClick={this.doDeleteItem.bind(this,item)} 吗？

标签： javascript reactjs

【解决方案1】：

尝试将doDeleteItem、deleteButton定义为方法而不是属性，然后在child中调用deleteButton并传递你需要的参数

doDeleteItem(rows) {
    console.log('the item to delete is: ', rows)
};

deleteButton(rows) {
  return <button
    className="btn btn-expand btn-stroke btn-success mr-5"
    type="primary"
    onClick={ () => this.doDeleteItem(rows) }
  >
    Delete item
  </button> 
}

render() {
  return (
    <TableContainer
      deleteButton={ this.deleteButton }
      doDeleteItem={this.doDeleteItem}
   />
 );
}

Example

【讨论】：

【解决方案2】：

您应该将父函数作为属性传递给子函数，并将按钮组件与父组件完全分开。您可以将此按钮组件包含在子组件中（尽管最好也将此组件与子组件分开）并在那里插入父函数。如果要传参，需要绑定函数。

家长：

doDeleteItem = (blah) => {
    console.log('the item to delete is: ', blah);
};

render() {
    const locale = this.props.app.locale;

return (
    <TableContainer
    onButtonClick={this.doDeleteItem.bind(this, blah)}
    doDeleteTableItem={this.doDeleteTableItem}
    />
);

子（TableContainer）：

render() {
    var deleteButton = (
        <button
        onClick={this.props.onButtonClick}
        </button>
    )
return (
    // render TableContainer with deleteButton ..
);

【讨论】：

我想将按钮及其处理函数下推到 TableContainer 的原因是因为 TableContainer 是通用的，并且在我的整个应用程序中用于显示数据行。无论在何处使用 TableContainer，都会显示不同的按钮，并且需要针对选定的表行执行不同的 onClick 函数。实际上，您描述的方式就是它现在的工作方式，我正在尝试将按钮移出表格容器以使其更通用。

【解决方案3】：

正如@WitVault 在他的comment 中提到的，您可以在 deleteButton 中传递一些来自 onClick 的引用，以便表格知道要删除哪个。

deleteButton = (
  <button
    className="btn btn-expand btn-stroke btn-success mr-5"
    type="primary"
    onClick={() => this.doDeleteItem(referenceToMeSoTableKnows)}>
      Delete item
  </button>
)

【讨论】：

【解决方案4】：

在您的代码中，deleteButton 被调用只是为了返回 jsx。所以你必须在TableContainer的render方法中使用它来渲染按钮。

从这里开始

<TableContainer
      deleteButton={ this.deleteButton() }
      doDeleteItem={this.doDeleteItem}
   />

doDeleteItem 在TableContainer 中作为道具传递。您可以通过this.props 在TableContainer 中访问它。请注意，此范围应引用TableContainer 的范围，以便您可以访问其props。

deleteButton = (
      <button
       className="btn btn-expand btn-stroke btn-success mr-5"
       type="primary"
       onClick={this.props.doDeleteItem.bind(this,item)}
     </button>
   )

我希望这应该可行。

【讨论】：