Javascript reactjs-如何将子组件中的数据输入到道具中传递的按钮上？

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

dodeletietem=（废话）=>{
log（'要删除的项是：'，等等）；
};
删除按钮=(
尝试将
dodeletItem
，
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}
   />
 );
}

dodeletietem（行）{
console.log（'要删除的项为：'，行）
};
删除按钮（行）{
返回此.doDeleteItem（行）}
>
删除项目
}
render（）{
返回(
);
}

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

家长：

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}
    />
);

dodeletietem=（废话）=>{
log（'要删除的项是：'，等等）；
};
render（）{
const locale=this.props.app.locale；
返回(
);

子（表格容器）：

render（）{
var deleteButton=(
正如@WitVault在他的文章中提到的，您可以通过onClick in delete按钮传递一些引用，以便表知道要删除哪个引用

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

deleteButton=(
this.dodeletietem（referenceToMeSoTableKnows）}>
删除项目
)
在您的代码中，
deleteButton
被调用只是为了重新使用jsx。因此您必须在
TableContainer
的渲染方法中使用它来渲染按钮

从这里开始

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

我希望这能起作用。
我正在编辑我自己的评论。你想把数据从TableContainer放到
testButton
？你能不能在@Henrik上展开一下？有点不清楚。你需要这个onClick={this.dodeletietem.bind（this，item）}？我想将按钮及其处理函数下推到TableContainer的原因是，TableContainer是通用的，在我的整个应用程序中用于显示数据行。使用TableContainer时，会显示不同的按钮，并且需要对所选表执行不同的onClick函数事实上，您描述的方式就是它现在的工作方式，我正在尝试将按钮从表容器中向上移动，使其更通用。
<TableContainer
      deleteButton={ this.deleteButton() }
      doDeleteItem={this.doDeleteItem}
   />

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