javascript - 如何将值传递给组件以删除表行？ ReactJS 和 Material UI

Question

我的目的是在点击后删除特定的表格行。我有两个组件，并且已经编写了从表 handleDelete() 中删除行的函数。问题是，点击后，总是最后一行被删除，而不是我点击的那一行。可能我需要将值(例如 props.nameTask)传递给父组件，但它不起作用(控制台错误)。

家长:

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

// Delete row from table
handleDelete = (index) => {
 var array = this.state.data.slice();
 array.splice(index, 1)
 this.setState({ data: array });
}

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

export default Home;

child :

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

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

Answer 1

我认为问题出在您传递给父函数的索引 handleDelete它不应该有你想要的值(尝试记录它看看它是什么)

我建议将要删除的索引添加到 <DeleteIcon/>元素作为新属性。

更改父级 handleDelete类似于:

handleDelete = e => {
  const index = e.currentTarget.getAttribute('index')
  ...
}