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

Question

我正在使用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组件，因此它看不到变量来定义用户选择删除的数据行。

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

Answer 1

尝试将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

Answer 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 ..
);

Answer 3

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

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

Answer 4

在您的代码中， deleteButton仅因重用jsx而被调用。 因此，您必须在TableContainer render方法内使用它来呈现按钮。

从这里开始

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

doDeleteItem作为TableContainer传递给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>
   )

我希望这应该起作用。