react 新增可编辑删除单元格并获取数据

在React中，要实现可编辑删除单元格并获取数据，可以通过以下步骤进行：

1. 首先，在组件的state中定义一个数组，用于存储数据。例如，可以在constructor中初始化一个空数组：

constructor(props) {
  super(props);
  this.state = {
    data: []
  };
}

2. 接下来，在组件的render方法中，使用一个表格来展示数据，并提供编辑和删除按钮。可以使用map函数来遍历数据数组，并生成对应的表格行。同时，为每一个编辑按钮和删除按钮绑定相应的事件处理函数，以便在点击时触发操作。例如：

render() {
  const { data } = this.state;

  return (
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>
              <button onClick={() => this.handleEdit(index)}>编辑</button>
              <button onClick={() => this.handleDelete(index)}>删除</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

3. 然后，实现编辑和删除的事件处理函数。对于编辑操作，可以在state中再定义一个用于存储当前正在编辑的单元格数据的索引（如editIndex），并将其绑定到对应的编辑输入框的value属性上。当编辑输入框发生变化时，更新当前正在编辑的单元格数据。例如：

handleEdit(index) {
  this.setState({ editIndex: index });
}

handleChange(event) {
  const { editIndex, data } = this.state;
  const { name, value } = event.target;

  this.setState({
    data: data.map((item, index) => (
      index === editIndex ? { ...item, [name]: value } : item
    ))
  });
}

4. 对于删除操作，可以使用splice函数从数据数组中移除指定索引的元素。例如：

handleDelete(index) {
  const { data } = this.state;
  data.splice(index, 1);
  this.setState({ data });
}

5. 最后，如果要获取所有的数据，可以在组件中定义一个提交按钮，并绑定一个事件处理函数。在这个函数中，可以打印数据数组或将其发送到服务器等。例如：

handleSubmit() {
  const { data } = this.state;
  console.log(data);
}

以上就是使用React实现可编辑和删除单元格并获取数据的步骤。通过添加适当的事件处理函数，并更新state中的数据数组，即可实现对表格数据的交互操作。