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
});