ReactFC的组件 FormList 怎么通过 FormList 实现双向绑定

要通过 Form.List 实现双向绑定，你可以按照以下步骤进行操作：

1. 在你的函数组件中，使用 Form.List 组件包裹需要实现双向绑定的表单项。

import { Form, Input } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.List name="items">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Form.Item
                {...field}
                name={[field.name, 'name']}
                fieldKey={[field.fieldKey, 'name']}
                rules={[{ required: true, message: 'Please enter name' }]}
              >
                <Input placeholder="Name" />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add Item
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </Form>
  );
};

2. 通过 form.getFieldValue 获取表单项的值，并将其绑定到组件的状态中。

const MyForm = () => {
  const [form] = Form.useForm();
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(form.getFieldValue('items'));
  }, [form]);

  return (
    <Form form={form}>
      <Form.List name="items">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Form.Item
                {...field}
                name={[field.name, 'name']}
                fieldKey={[field.fieldKey, 'name']}
                rules={[{ required: true, message: 'Please enter name' }]}
              >
                <Input placeholder="Name" />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add Item
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </Form>
  );
};

3. 通过 form.setFieldsValue 更新表单项的值。

const MyForm = () => {
  const [form] = Form.useForm();
  const [items, setItems] = useState([]);

  useEffect(() => {
    setItems(form.getFieldValue('items'));
  }, [form]);

  const handleUpdateItems = newItems => {
    form.setFieldsValue({ items: newItems });
  };

  return (
    <Form form={form}>
      <Form.List name="items">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Form.Item
                {...field}
                name={[field.name, 'name']}
                fieldKey={[field.fieldKey, 'name']}
                rules={[{ required: true, message: 'Please enter name' }]}
              >
                <Input placeholder="Name" />
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add Item
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Button onClick={() => handleUpdateItems([/* new items */])}>
        Update Items
      </Button>
    </Form>
  );
};

通过以上步骤，你可以通过 Form.List 实现双向绑定，并在需要的时候更新表单项的值