Question

我正在将表行动态添加到表中。这是它在用户界面中的外观：

这是我用来创建新行的逻辑：

我有一个状态变量this.state = ({rows: []})

在“插入”按钮上，单击我正在执行的操作：

addNewRow = () => {
        this.setState({rows: this.state.rows.concat([{}])});
    }

在我的render()中，我有以下代码：

const rows = this.state.rows.map((item, id) => {
            return(
                <tr key={id}>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td>Something</td>
                    <td><Button onClick={(event) => this.removeRow(event, id)}>Delete</Button></td>
                </tr>
            );
        });

，显然，我的最终表代码如下所示：

<Table borderless>
    <tbody>
       {rows}
    </tbody>
<tfoot>
    <tr>
       <td>
        <Button onClick={() => {this.addNewRow()}} size="sm" className="float-left">insert</Button>
       </td>
    </tr>
</tfoot>
</Table>

这是我的removeRow函数：

removeRow = (event, id) => {
        event.preventDefault();
        var index = this.state.rows.indexOf(id);
        this.state.rows.splice(index, 1);
        this.setState({rows: this.state.rows});
    }

整个代码有效。我已经更改了变量名称，并从中删除了不需要的代码，但这是为了让我了解如何设计它。

我的问题是，当我单击“删除”按钮时，它总是删除该行中的最后一个项目，而不是我单击的项目行。该如何解决？

我在Google上搜索了差不多的内容，说实话，我发现了几个例子，我觉得它们很复杂，所以我决定按自己的方式前进。

请告知需要采取哪些措施来解决此问题。

Answer 1

从不直接在React中更改状态：

您需要这样做：

removeRow=(event,id)=>{  
  var array = [...this.state.rows]; // make a new copy of array instead of mutating the same array directly. 
  var index = array.findIndex(x => x.id===id); //find the index of item which matches the id passed to the function
  array.splice(index, 1);
  this.setState({people: array});
  }

Answer 2

那是因为您使用数组索引作为<tr>元素的键。

React使用key来标识要插入或从现有DOM树中删除的内容。

请使用任何其他唯一标识符，例如Date.now()作为密钥，并将此密钥另存为rows状态的一部分。

addNewRow = () => {
  const { rows } = this.state
  this.setState({
    rows: [
      ...rows,
      {
        id: Date.now(),
      },
    ],
  })
}

render() {
   const rows = this.state.rows.map((item, index) => (
     <tr key={item.id}>
     </tr>
   ))
}

Answer 3

那是因为您使用的.map()错误。

您需要像这样通过 item ：

<td><Button onClick={(event) => this.removeRow(event, item)}>Delete</Button></td>

您正在将数组的索引传递为id。因为array.map运算符的第二个参数是数组中该元素的 index 。

执行此操作：

removeRow = (event,item) => {  
  var array = [...this.state.rows]; // make a new copy of array instead of mutating the same array directly. 
  var index = array.indexOf(item)
  array.splice(index, 1);
  this.setState({people: array});
  }

删除动态添加的表行-React JS

3 个答案: