react实现可编辑表格

React可以通过使用contentEditable属性来实现可编辑表格。您可以使用React组件来创建表格，然后将contentEditable属性应用于表格单元格，以便用户可以编辑表格中的内容。您还可以使用React的状态来跟踪表格中的更改，并将这些更改保存到数据库或其他数据存储中。以下是一个简单的React组件，用于创建可编辑表格：

import React, { useState } from 'react';

function EditableTable() {
  const [tableData, setTableData] = useState([
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
    { id: 3, name: 'Bob Johnson', age: 40 }
  ]);

  const handleCellChange = (id, field, value) => {
    const newData = tableData.map(row => {
      if (row.id === id) {
        return { ...row, [field]: value };
      }
      return row;
    });
    setTableData(newData);
  };

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(row => (
          <tr key={row.id}>
            <td>{row.id}</td>
            <td contentEditable onBlur={e => handleCellChange(row.id, 'name', e.target.innerText)}>{row.name}</td>
            <td contentEditable onBlur={e => handleCellChange(row.id, 'age', e.target.innerText)}>{row.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default EditableTable;

在这个例子中，我们使用useState钩子来创建一个名为tableData的状态，它包含一个包含三个对象的数组，每个对象代表表格中的一行。我们还定义了一个名为handleCellChange的函数，该函数在单元格中的内容发生更改时被调用，并使用map函数更新tableData状态。最后，我们将contentEditable属性应用于表格单元格，并在失去焦点时调用handleCellChange函数来更新状态。