javascript - ReactJS - 如何将数据从子组件获取到在 Prop 中传递的按钮的 onclick 中？

Question

我正在使用 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}
       />
     );

更新:评论说有点不清楚。 这是上下文:

TableContainer 组件显示数据行。

我通过 props 将 Button 组件推送到 TableContainer 中。

TableContainer 呈现按钮。

我还按下按钮的函数以在其 onClick 事件中调用。

其想法是，用户在表中选择行，按下按钮(例如删除)，然后按钮运行其 onClick 函数来删除所选行。

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

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

这样是不是更清楚了？如果没有请告诉我。谢谢

Answer 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