Javascript 在ReactJS中使用迭代时，如何将onClick事件传递给父组件？

我想在单击事件后删除表中的行。我已经创建了迭代和showdelete按钮，但不知道在我的情况下如何将onClick事件从父组件传递到子组件。 我尝试将

const row

更改为

component

，并像通常一样传递onClick，但此方法破坏了我的表

父组件：

class Home extends Component {
 constructor(props) {
 super(props);
 this.state = { data: []};
}

handleDelete{
 alert('here I want to have code to remove row from table')
}

render() {
 return (
  <div>
    <TableTasks data={this.state.data} header={[{ name: "No"}, { name: "Delete" }]} />
  </div>
);
}}

class Home扩展组件{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
}
Handledelite{
警报（'此处我希望有代码从表中删除行'）
}
render（）{
返回(
);
}}

子组件：

const row = (props, i) =>
<TableRow key={`thr-${i}`}>
  <TableRowColumn>
    {props.nameTask}
  </TableRowColumn>
  <TableRowColumn className="DeleteButton">
    <IconButton>
      <DeleteIcon onClick={?????}/>
    </IconButton>
  </TableRowColumn>
</TableRow>;

export const TableTasks = ({ data, header }) => 
<Table>
 <TableHeader>
  <TableRow>
    {header.map((x, i) =>
      <TableHeaderColumn key={`thc-${i}`}>
        {x.name}
      </TableHeaderColumn>
    )}
  </TableRow>
 </TableHeader>
 <TableBody>
  {data.map((x, i) => row(x, i))}
 </TableBody>
</Table>;

<TableTasks handleDelete={this.handleDelete}  .... />

const行=（道具，i）=>
{props.nameTask}
;
export const TableTasks=（{data，header}）=>
{header.map（（x，i）=>
{x.name}
)}
{data.map（（x，i）=>行（x，i））}
;

步骤：

1-将一个

handleDelete

函数从父级传递到子级

TableTasks

组件：

const row = (props, i) =>
<TableRow key={`thr-${i}`}>
  <TableRowColumn>
    {props.nameTask}
  </TableRowColumn>
  <TableRowColumn className="DeleteButton">
    <IconButton>
      <DeleteIcon onClick={?????}/>
    </IconButton>
  </TableRowColumn>
</TableRow>;

export const TableTasks = ({ data, header }) => 
<Table>
 <TableHeader>
  <TableRow>
    {header.map((x, i) =>
      <TableHeaderColumn key={`thc-${i}`}>
        {x.name}
      </TableHeaderColumn>
    )}
  </TableRow>
 </TableHeader>
 <TableBody>
  {data.map((x, i) => row(x, i))}
 </TableBody>
</Table>;

<TableTasks handleDelete={this.handleDelete}  .... />

3-

handleDelete

将在

TableTasks

组件中提供，对其进行类似于数据的分解：

export const TableTasks = ({ data, header, handleDelete }) => {...}

4-现在将

handleDelete

传递到

行

功能：

{data.map((x, i) => row(x, i, handleDelete))}

5-现在将提供手持设备：

const row = (props, i, handleDelete) => {
   console.log('handleDelete', handleDelete);
   return (
       ....
       <DeleteIcon onClick={handleDelete} />
       ....
   )
}

const行=（道具、i、handleDelete）=>{
console.log（'handleDelete'，handleDelete）；
返回(
....
....
)
}