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

Question

我想在点击事件后删除表格行.我已经创建了迭代并显示删除按钮,但不知道如何在我的情况下将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>
);
}}

子组件:

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>;

Answer 1

脚步:

1-将handleDelete函数从父TableTasks组件传递给子组件:

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

2- handleDelete在父母中定义:

handleDelete(){....}

3- handleDelete将在TableTasks组件内部可用,与数据类似地进行结构化:

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

4-现在传递给handleDeleteto row函数:

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

5-现在handleDelete可用:

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