Antd 4复选框在表单提交后没有值

Question

我的拥有

我有一个带有复选框的Ant Design 4表单：

const Example = ({ initialValues, onSave }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [initialValues.isAccepted]);

  const onFinish = (values) => {
    console.log(values);
    onSave(values);
  };

  const getInitialValues = useCallback(() => ({
    isAccepted: initialValues.isAccepted || false,
  }));

  return (
    <Form form={form} onFinish={onFinish} initialValues={getInitialValues()}>
      <Form.Item name="isAccepted">
        <Checkbox>The company can use my data</Checkbox>
      </Form.Item>
      <Button type="primary" htmlType="submit">Save</Button>
    </Form>
  );
};

问题

即使在initialValues中为true，复选框始终未选中。此外，当我提交表单时，values变量始终包含来自initialValues的值，它不会注册我更改（选中或取消选中）复选框。

目标

我希望能够正确地从inititalValues设置初始值，并在onFinish中获取复选框的当前值。

- totymedli

Answer 1

简短概述

在Form.Item组件中添加valuePropName="checked"：

<Form.Item name="isAccepted" valuePropName="checked">

解释

复选框的值不像文本输入框那样存储在value属性中。相反，它有一个checked属性。您需要通过valuePropName告诉Form.Item组件设置该属性/prop的名称来将其设置为属性/prop。

Form.Item文档描述了这个prop：

valuePropName: 子节点的props，例如Switch的props是'checked'。这个prop是getValueProps的封装，在自定义 getValueProps 后将无效

之后，文档描述了包装发生的方式：

在使用name属性由Form.Item包装后，将会添加value（或其他由valuePropName定义的属性）onChange（或其他由trigger定义的属性）props到表单控件中，表单数据的流程将由表单处理...

- totymedli