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

Question

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

Parent:

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

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

按行索引：

将索引传递给DeleteIcon组件：

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

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

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

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

通过任何其他唯一属性:

同样的方法，但你需要运行循环来找到那个唯一项目的索引，在得到索引后删除项目并更新状态。

建议:

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

查看此答案了解更多详情：

Answer 2

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

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

将父级 handleDelete 更改为如下内容：

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

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

How to pass value to component in order to delete table row? ReactJS and Material UI

javascript

reactjs

uitableview

material-ui