目前我有一个table,table中暂时定义了有两行的数据,我想要实现点击不同的行展示的效果不一样
现在的功能是我点击编辑的时候弹出子组件的界面输入数据点击保存,再把数据传递到父组件中文本框中,但是我在点击
第二行的时候我那个数据会带过来。
希望达到的结果我不想继承第一行的数据。
当我table有两行数据单击当前行编辑按钮 就清空子组件中的数据不会把首次保存的数据继承过来
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>
),
},
]
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 handleEnablingChange = (key, value) => {
setEnablingValues((prevValues) => ({
...prevValues,
[key]: value,
}));
};
const handleEdit = (record) => {
debugger
// 处理编辑逻辑，例如根据 record 更新表格数据或其他操作
setShowModal(true);
setEditingKey(record.key);
setenablingvalue(enablingValues[editingKey]);
console.log("文本框的值:",setenablingvalue);
};
const onSave = (values) => {
debugger
const { Enabling } = values;
enablingValues[editingKey] = Enabling;
// 使用 editingKey 进行更新相应的行
// 更新完毕后清空 editingKey
setEditingKey(null);
setShowModal(false);
};
<EnablingeditComponets
visible={showModal}
handclose={handleClose}
onSave={onSave}
enablingValue={enablingvalue} // 将当前编辑行的值传递给子组件
/>
<Table
dataSource={columntwoData}
columns={columntwo}
/>
子组件
function EnablingeditComponets(props){
const{
visible,
handclose,
}=props;
const[isopenBnnagling,setisopenBnnagling]=useState(false);
const [form] = Form.useForm();//Form.useForm()生成了一个form实例，并将其绑定到了Form组件上
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="启用条件"
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
点击按钮
