React的 FormList 怎么绑定明细

在React中，可以使用Form.List来创建一个动态表单列表，并将其与明细数据进行绑定。

首先，需要在表单组件中引入Form.List组件，并在Form.Item中使用它来创建一个表单列表。例如：

import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_item" onFinish={onFinish}>
      <Form.List name="details">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Form.Item
                  {...field}
                  label={`Detail ${index + 1}`}
                  name={[field.name, 'name']}
                  fieldKey={[field.fieldKey, 'name']}
                  rules={[{ required: true, message: 'Missing detail name' }]}
                >
                  <Input placeholder="Detail Name" />
                </Form.Item>
              ))}
              <Form.Item>
                <Button type="dashed" onClick={() => add()} block>
                  Add Detail
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在上面的示例中，我们使用Form.List创建了一个名为"details"的表单列表。在表单列表中，我们使用fields.map来遍历每个表单项，并使用Form.Item来创建每个明细项的表单控件。我们将每个明细项的name和fieldKey设置为一个数组，以便能够正确地绑定和更新每个明细项的值。

通过调用add函数，可以动态地添加新的明细项。通过调用remove函数，可以动态地删除明细项。

最后，我们在表单的onFinish回调函数中获取绑定的明细数据。在这个示例中，我们只是简单地将其打印到控制台上，但你可以根据需要进行其他操作。

这就是如何使用Form.List来绑定明细数据的基本方法。你可以根据自己的需求进行调整和扩展