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

Posted 2021-04-20

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

答案

脚步：

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

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

2-在父母中定义handleDelete：

handleDelete(){....}

3- handleDelete将在TableTasks组件内部提供，其结构与数据类似：

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

4-现在将handleDelete传递给row函数：

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

5-现在handleDelete将可用：

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