ProTable双击可编辑

要实现在Ant Design的Table组件中双击单元格修改内容，你可以通过以下步骤来实现：

1. 创建一个 React 组件，并引入所需的依赖：

npm install antd

2. 编写示例代码：

import React, { useState } from 'react';
import { Table, Input } from 'antd';

const EditableTable = () => {
  const [dataSource, setDataSource] = useState([
    { key: '1', name: 'John Doe', age: 30 },
    { key: '2', name: 'Jane Smith', age: 25 },
  ]);

  const handleCellDoubleClick = (record, dataIndex, event) => {
    const { key } = record;
    const value = record[dataIndex];
    const input = <Input defaultValue={value} onPressEnter={(e) => handleCellSave(key, dataIndex, e.target.value)} />;
    setDataSource(dataSource.map((item) => (item.key === key ? { ...item, [dataIndex]: input } : item)));
  };

  const handleCellSave = (key, dataIndex, value) => {
    setDataSource(dataSource.map((item) => (item.key === key ? { ...item, [dataIndex]: value } : item)));
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      editable: true,
      onCell: (record) => ({
        onClick: () => {}, // 空函数，防止触发行点击事件
        onDoubleClick: () => handleCellDoubleClick(record, 'name'),
      }),
    },
    {
      title: 'Age',
      dataIndex: 'age',
      editable: true,
      onCell: (record) => ({
        onClick: () => {}, // 空函数，防止触发行点击事件
        onDoubleClick: () => handleCellDoubleClick(record, 'age'),
      }),
    },
  ];

  return <Table dataSource={dataSource} columns={columns} />;
};

export default EditableTable;

　　在上面的代码中，我们创建了一个名为 EditableTable 的组件，使用 Table 组件展示表格数据。我们定义了 handleCellDoubleClick 函数，在双击单元格时将单元格的内容替换为

可编辑的输入框，并通过 handleCellSave 函数保存修改后的值。

在 columns 中，我们设置了 onCell 属性来处理单元格的双击事件，并调用 handleCellDoubleClick 函数来开启编辑模式。

3. 渲染该组件：

import React from 'react';
import EditableTable from './EditableTable';

function App() {
  return (
    <div>
      <h1>Editable Table Example</h1>
      <EditableTable />
    </div>
  );
}

export default App;

　　通过以上步骤，你就可以在 Table 组件中实现双击单元格修改内容的功能。希望这个示例对你有帮助！如果你有任何其他问题，请随时提问。

转自：charGpt