React Antd 表格自定义行自动回显数据,编辑切换输入框,无数据显示表格
根据您提供的信息,可以尝试以下步骤来解决问题:
-
确保您已经正确引入了antd和react相关的依赖。
-
确保您的表格组件已经正确配置了columns和dataSource属性。
-
确保您的自定义行组件已经正确定义,并且在components.body中引用了该组件。
-
确保您的自定义行组件能够正确接收并显示数据。
-
确保您的编辑功能已经正确实现,包括将自定义行切换为输入框,并能够正确保存修改的数据。
以下是一个简单的示例代码,演示了如何使用antd表格和自定义行组件来实现所描述的功能:
import React, { useState } from 'react';
import { Table, Input } from 'antd';
const CustomRow = ({ record, handleEdit }) => {
const [value, setValue] = useState(record.data);
const handleInputChange = e => {
setValue(e.target.value);
};
return (
<tr>
<td>{record.name}</td>
<td>
{record.isEditing ? (
<Input value={value} onChange={handleInputChange} />
) : (
record.data
)}
</td>
<td>
{record.isEditing ? (
<button onClick={() => handleEdit(record.id, value)}>Save</button>
) : (
<button onClick={() => handleEdit(record.id)}>Edit</button>
)}
</td>
</tr>
);
};
const MyTable = () => {
const [data, setData] = useState([
{ id: 1, name: 'John', data: 'Data 1', isEditing: false },
{ id: 2, name: 'Jane', data: 'Data 2', isEditing: false },
// Add more data here
]);
const handleEdit = (id, value) => {
setData(prevData =>
prevData.map(item =>
item.id === id ? { ...item, data: value, isEditing: !item.isEditing } : item
)
);
};
const columns = [
{ title: 'Name', dataIndex: 'name' },
{ title: 'Data', dataIndex: 'data', render: (_, record) => <CustomRow record={record} handleEdit={handleEdit} /> },
{ title: 'Action', dataIndex: '', render: (_, record) => <CustomRow record={record} handleEdit={handleEdit} /> },
];
return <Table columns={columns} dataSource={data} />;
};
export default MyTable;
在上面的示例代码中,我们使用useState钩子函数来管理表格数据。每一条数据都有一个isEditing属性,用于表示当前是否处于编辑状态。当点击编辑按钮时,会切换isEditing的值。同时,我们还使用了render属性来渲染自定义行组件,并传递了handleEdit函数用于保存编辑后的数据。
您可以根据实际需求进行修改和扩展。希望以上信息对您有所帮助!
原文地址: https://www.cveoy.top/t/topic/o33g 著作权归作者所有。请勿转载和采集!