Question

在表中添加几行数据后。我无法删除特定的行。被删除的行始终是最后一行。在删除方法出错的地方需要帮助。

我已经创建了remove row方法，但无法正常工作

remove = (idx) =>{
  const rows = [...this.state.rows];
  rows.splice(idx,1);
  this.setState({ rows })
}

  <div>
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Number</th>
          </tr>
          </thead>
          <tbody>
          {this.state.rows.map((item, idx) => (
            <tr key={idx}>
            <td>{idx}</td>
            <td><input
            type="text"
            name="name"
            ></input></td>
            <td><input
             type="text"
             name="number"
            ></input></td>
            <td><button onClick={()=>this.remove(idx)}>Remove</button></td>
          </tr>    
      ))}
          </tbody>
    </table>
    <button onClick={this.add}>Add</button>
  </div>

在添加3行后，例如添加数据。如果我单击从第二行删除。同样应该删除。不是最后一个。

Answer 1

您可以通过将idx与onClick绑定来解决此问题，如下代码。最后被删除的原因是onClick使用的idx值将是最后一个idx。

<div>
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Number</th>
          </tr>
          </thead>
          <tbody>
          {this.state.rows.map((item, idx) => (
            <tr key={idx}>
            <td>{idx}</td>
            <td><input
            type="text"
            name="name"
            ></input></td>
            <td><input
             type="text"
             name="number"
            ></input></td>
            <td><button onClick={this.remove.bind(null, idx)}>Remove</button></td>
          </tr>    
      ))}
          </tbody>
    </table>
    <button onClick={this.add}>Add</button>
  </div>

--------编辑--------------

remove = (idx) =>{
  const rows = this.state.rows;
  rows.splice(idx,1);
  this.setState({ rows });
}

如何从我创建的表中删除特定行？

1 个答案: