react+ant design表格单行编辑实现
本文介绍如何在React+Ant Design表格中实现点击单行编辑，而非全表编辑的功能。
核心思路： 通过状态管理控制当前编辑行的索引，仅渲染对应行的编辑组件。
步骤：
-
使用
EditableCell或自定义编辑组件: Ant Design表格本身并不直接支持单行编辑，需要借助EditableCell组件（或自行实现类似功能的组件）。EditableCell允许在单元格内嵌入编辑组件，例如输入框。 -
状态管理： 使用React的
useState钩子创建一个状态变量，例如editingRow，存储当前正在编辑的行索引。初始值为null或-1，表示没有行处于编辑状态。 -
条件渲染： 在表格行渲染中，根据
editingRow的状态判断是否渲染编辑组件。如果editingRow与当前行索引一致，则渲染编辑组件；否则，渲染正常单元格内容。 这可以使用三元运算符或其他条件渲染方法实现。 -
点击事件处理： 为表格行添加点击事件处理函数，在点击时更新
editingRow状态，将当前行索引设置为正在编辑的行。 -
表单处理（可选）： 如果需要表单验证或其他表单相关功能，可以使用Ant Design的
Form组件来包裹编辑组件，并进行相应的表单处理。
代码示例（简化版）：
<code class="javascript">import React, { useState } from 'react';
import { Table, Input } from 'antd';
const EditableCell = ({ editing, value, onChange }) => (
editing ? (
<Input value={value} onChange={e => onChange(e.target.value)} />
) : (
value
)
);
const App = () => {
const [data, setData] = useState([
{ key: 1, name: 'John Doe' },
{ key: 2, name: 'Jane Doe' },
]);
const [editingRow, setEditingRow] = useState(null);
const handleEdit = (key) => {
setEditingRow(key);
};
const handleSave = (key, value) => {
const newData = [...data];
const index = newData.findIndex(item => item.key === key);
newData[index].name = value;
setData(newData);
setEditingRow(null);
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text, record) => (
<EditableCell
editing={record.key === editingRow}
value={text}
onChange={value => handleSave(record.key, value)}
/>
),
},
{
title: 'Action',
render: (text, record) => (
<button onClick={() => handleEdit(record.key)}>Edit</button>
),
},
];
return (
<Table dataSource={data} columns={columns} />
);
};
export default App;</code>
这段代码提供了一个基本框架，实际应用中可能需要根据具体需求进行调整和完善，例如添加错误处理、更复杂的编辑组件等。 记住要安装必要的Ant Design组件：npm install antd
