React+antd-ui框架实现一个table中多行数据的情况下点击不同行展示不同的数据
问题场景:
假设我目前一个table中有两行的数据,每行数据都有一个编辑的按钮,在我点击编辑的时候要实现点击不同的行展示不同的数据。我现在遇到的问题就是我第一行的数据保存了,点击第二行的时候我第二行的文本框明明是空的,但是子组件还是会展示之前第一行保存的数据。难道是因为我保存和点击展示冲突了嘛?
实现效果:
第一步是点击编辑按钮弹出子组件填写信息,点击保存把数据传递给父组件进行展示。（已经实现）
第二步是点击不同行编辑按钮展示这个行里面的数据到子组件。(存在问题)
父组件
function IndocmentComponets(props){
const [enablingValues, setEnablingValues] = useState({});
const [AvailableValues, setAvailableValues] = useState({});
const [editingKey, setEditingKey] = useState(null); // 新增设置编辑行的标识符
const [enablingvalue,setenablingvalue]=useState([]);
//列定义
const columns = [
{
title: '启用条件',
dataIndex: 'Enabling',
key: 'Enabling',
render: (_, record) => (
<EnablingInput initialValue={enablingValues[record.key]} onChange={(value) => handleEnablingChange(record.key, value)} />
),
},
{
title: '编辑',
key: 'edit',
render: (text, record) => (
<button onClick={() => handleEdit(record)}>编辑</button>
),
},
]
const handleEnablingChange = (key, value) => {
setEnablingValues((prevValues) => ({
...prevValues,
[key]: value,
}));
};
function EnablingInput({ initialValue, onChange }) {
debugger
const [enablingValue, setEnablingValue] = useState(initialValue);
const handleInputChange = (e) => {
setEnablingValue(e.target.value);
if (onChange) {
onChange(e.target.value);
}
};
return <Input value={enablingValue} onChange={handleInputChange} />;
}
const handleEdit = (record) => {
debugger
// 处理编辑逻辑，例如根据 record 更新表格数据或其他操作
setShowModal(true);
setEditingKey(record.key);
const enablingValue = enablingValues[record.key]; // 获取当前行文本框的值
const Availablevalue=AvailableValues[record.key];;
setenablingvalue(enablingValue);
setAvailablevalue(Availablevalue);
};
const handleClose = () => {
setShowModal(false);
};
const onSave = (values) => {
debugger
const { Enabling } = values;
enablingValues[editingKey] = Enabling;
const { Available } = values;
AvailableValues[editingKey] = Available;
// 使用 editingKey 进行更新相应的行
// 更新完毕后清空 editingKey
setEditingKey(null);
setShowModal(false);
};
<EnablingeditComponets
visible={showModal}
handclose={handleClose}
onSave={onSave}
enablingValue={enablingvalue} // 将当前编辑行的值传递给子组件据
editcodingvalue={editcodingvalue}}
/>
<Table
dataSource={columntwoData}
columns={columntwo}
/>
}export default IndocmentComponets
子组件
function EnablingeditComponets(props){
debugger
const{
visible,
handclose,
onSave,
enablingvalue,//接收父组件的数据
}=props;
const [form] = Form.useForm();//Form.useForm()生成了一个form实例，并将其绑定到了Form组件上
const [isopenBnnagling, setisopenBnnagling] = useState(false);
const [currentEnablingValue, setCurrentEnablingValue] = useState(enablingvalue);
useEffect(() => {
setisopenBnnagling(visible);
form.setFieldsValue({
Enabling: currentEnablingValue,,
}); // 设置初始值为 enablingValue位
}, [visible, currentEnablingValue, form]);
const handleSave=(values)=>{
console.log("条件值:",values);
onSave(values);
form.setFieldsValue(values);
form.resetFields(); //清空表单数据
}
return(
<>
<Modal visible={visible} onCancel={handclose} footer={null}>
<Form
form={form}
onFinish={handleSave} layout="vertical">
<Form.Item name="Enabling" label="启用条件" initialValue={currentEnablingValue}
value={currentEnablingValue} onChange={(e) => setCurrentEnablingValue(e.target.value)}
>
<Input />
</Form.Item>>
<Form.Item wrapperCol={{ span: 24, style: { textAlign: 'center' } }}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
</Modal>
</>
)
}export default EnablingeditComponets
实现效果:
第一步是点击编辑按钮弹出子组件填写信息,点击保存把数据传递给父组件进行展示。（已经实现）
第二步是点击不同行编辑按钮展示这个行里面的数据到子组件。(存在问题)
点击第一行
点击第二行 此时应该组件对应的是空的因为文本框没有值
已经实现
子组件代码
function EnablingeditComponets(props){
debugger
const{
visible,
handclose,
onSave,
enablingvalue,//接收父组件的数据
Availablevalue,
editcodingvalue,
updateventvalue,
filedencodingvalue,
}=props;
const [form] = Form.useForm();//Form.useForm()生成了一个form实例，并将其绑定到了Form组件上
const [isopenBnnagling, setisopenBnnagling] = useState(false);
useEffect(() => {
setCurrentEnablingValue(enablingvalue);
}, [enablingvalue]);
const [currentEnablingValue, setCurrentEnablingValue] = useState(enablingvalue);
useEffect(() => {
setisopenBnnagling(visible);
form.setFieldsValue({
Enabling: currentEnablingValue,
}); // 设置初始值为 enablingValue位
}, [visible, currentEnablingValue, form]);
const handleSave=(values)=>{
console.log("条件值:",values);
onSave(values);
form.setFieldsValue(values);
form.resetFields(); //清空表单数据
}
return(
<>
<Modal visible={visible} onCancel={handclose} footer={null}>
<Form
form={form}
onFinish={handleSave} layout="vertical">
<Form.Item name="Enabling" label="启用条件" initialValue={currentEnablingValue}
value={currentEnablingValue} onChange={(e) => setCurrentEnablingValue(e.target.value)}
>
<Input />
</Form.Item>
<Form.Item wrapperCol={{ span: 24, style: { textAlign: 'center' } }}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
<IssuesCloseOutlined
style={{ position: 'absolute', top: '16px', right: '246px', fontSize: '15px' }}
onClick={handleRefresh}
/>
</Modal>
</>
)
}export default EnablingeditComponets
父组件代码
<EnablingeditComponets
visible={showModal}
handclose={handleClose}
onSave={onSave}
// enablingValue={enablingvalue} // 将当前编辑行的值传递给子组件据
enablingvalue={enablingValues[editingKey]} // 根据当前编辑行的key值获取对应的数据
editcodingvalue={EditcondValues[editingKey]}
Availablevalue={AvailableValues[editingKey]}
updateventvalue={updateventValues[editingKey]}
filedencodingvalue={filedencodingValues[editingKey]}
/>