reactjs-如何将数据从子组件转换为道具中传递的按钮的onclick？

杜加尔公爵

我正在使用ReactJS和ES2015

我通过道具将按钮传递到子组件中。

我看不到如何从孩子获取数据到按钮的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组件显示数据行。

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

TableContainer呈现按钮。

我还按下了一个函数，供Button在其onClick事件中调用。

这样的想法是，用户选择表中的行，然后按下按钮（例如，删除），然后该按钮运行其onClick函数，该函数将删除选定的行。

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

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

这更清楚吗？让我知道是否。谢谢

Oleksandr T.

尝试定义doDeleteItem，deleteButton为方法而不是属性，然后调用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。