React 表格：在每行数据下添加可编辑的自定义行

本指南将向您展示如何为 React 表格中的每条数据添加一个可编辑的自定义行。通过使用 React 状态管理和表单元素，您可以轻松创建可编辑的自定义行，使表格更具交互性。

1. 创建表格组件

首先，创建一个 React 组件作为表格容器。

2. 存储表格数据

在组件的 state 中创建一个数组，用于存放表格数据。

3. 生成表格行

在组件的 render 方法中，使用 map 方法遍历数据数组，为每条数据生成一个表格行，并在每条数据下新增一个空对象的行。

4. 实现可编辑的自定义行

在表格行中，使用 input 或其他表单元素来实现可编辑的自定义行。可以根据需求使用组件库或自定义样式来美化表格。

5. 更新数据

为每一个表单元素添加 onChange 事件，当表单元素的值发生变化时，更新对应空对象的行的数据。

6. 保存编辑结果

可以为表格添加按钮或其他操作来保存用户的编辑结果。

示例代码

import React, { Component } from 'react';

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]
    };
  }

  handleInputChange = (index, field, value) => {
    const { data } = this.state;
    const newData = [...data];
    newData[index][field] = value;
    this.setState({ data: newData });
  };

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

    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <>
              <tr key={index}>
                <td>{row.name}</td>
                <td>{row.age}</td>
              </tr>
              <tr key={`empty-${index}`}>
                <td>
                  <input
                    type='text'
                    value={row.name}
                    onChange={(e) => this.handleInputChange(index, 'name', e.target.value)}
                  />
                </td>
                <td>
                  <input
                    type='number'
                    value={row.age}
                    onChange={(e) => this.handleInputChange(index, 'age', e.target.value)}
                  />
                </td>
              </tr>
            </>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Table;

在上述示例代码中，通过 map 方法遍历数据数组，为每条数据生成一个表格行，并在每条数据下新增一个空对象的行。空对象的行中使用 input 元素来实现可编辑的自定义行。通过 onChange 事件监听表单元素的值变化，并更新对应空对象的行的数据。