如何将值传递给组件以删除表行？ 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;

儿童：

  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')
  ...
}

Answer 2

为此，您需要将一些唯一标识符传递给父组件，以从数组中删除特定项，如名称或行索引等。

按行索引：

将索引传递给DeleteIcon组件：

<DeleteIcon itemIndex={i} onClick={handleDelete}/>

现在从DeleteIcon组件调用handleDelete函数与项目索引：

this.props.handleDelete(this.props.itemIndex);

使用该索引删除特定项目。

由任何其他独特的财产：

相同的方法，但是在获取索引删除项目并更新状态之后，您需要运行循环以查找该唯一项目的索引。

建议：

由于您正在更新父数组（删除元素），因此使用数组索引作为键不是一个好主意，请使用其他一些唯一属性作为键。

查看此答案以获取更多详细信息：Why using array index as key is not a good idea?