Antd4X Form.List嵌入Table 表格项数据联动
antd 4X版本
父组件是Form组件,其中一项为Form.List,Form.List内嵌了一个Table
const form = Form.useForm()
<Form form={form}>
<Form.List>
{(fields, operate, { errors }) => {
return (
<Table
className="wf-subform"
size="small"
columns={columns}
dataSource={fields}
pagination={false}
/>
);
}}
</Form.List>
</Form>
Table中又两个输入框<DatePicker.RangePicker />和<Input />, 我需要选择日期范围后自动显示天数,或者输入天数后自动算出结束时间
但是根据Form.List组件,Table的数据源通过fields获取,但是fields是表单数据源,非符合Columns格式的数据源,如果直接改变dataSource来更新Table则无法实现
可以利用form表单变量,对整个表单数据进行整体改变。在onChange回调中,利用form.setFieldsValue(),直接对表单数据对象中的目标字段进行数据改变
//dates为DatePicker收集数据
//days为Input收集数据
const [start, end] = dates;
const diffInDays = end.diff(start, 'days') + 1;
form.setFieldsValue({
days: diffInDays
});