REACTFC 的组件formlist 的fields怎么使用怎么用

使用 form.list 组件，需要先定义一个字段数组 fields，其中每个字段包含一个 name 属性和一个 render 方法。

const fields = [
  {
    name: 'name',
    render: (field, index) => (
      <input
        name={field.input.name}
        value={field.input.value}
        onChange={field.input.onChange}
      />
    ),
  },
  {
    name: 'email',
    render: (field, index) => (
      <input
        name={field.input.name}
        value={field.input.value}
        onChange={field.input.onChange}
      />
    ),
  },
];

const MyForm = () => {
  const { form } = useForm();

  return (
    <form>
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <div key={field.key}>
                {fields.map((field, index) => (
                  <div key={field.key}>
                    {fields[index].render(field, index)}
                    <button type="button" onClick={() => remove(index)}>
                      Remove
                    </button>
                  </div>
                ))}
              </div>
            ))}
            <button type="button" onClick={() => add()}>
              Add User
            </button>
          </>
        )}
      </Form.List>
    </form>
  );
};

在上面的例子中，我们定义了一个 fields 数组，每个字段对象都有一个 name 属性和一个 render 方法。在 render 方法中，我们将 input 的 name、value 和 onChange 属性与 field.input 对象的对应属性绑定。

然后，在 Form.List 组件中使用这个 fields 数组。在 render 方法中，我们可以通过 fields.map 遍历每个字段，并调用 render 方法来渲染表单控件。在这个例子中，我们使用了 input 元素作为表单控件，并绑定了相应的属性和事件。

同时，我们还可以通过 add 和 remove 方法来动态地添加和删除表单字段。

最后，将整个表单组件包裹在一个 form 元素中