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

问题

即使该复选框位于true内部，也始终处于未选中状态initialValues。另外，当我提交表单时，values变量始终包含来自 的值initialValues，它不会注册我更改（选中或未选中）复选框。

目标

我希望正确设置初始值inititalValues并获取 中复选框的当前值onFinish。

Answer 1

太长了；博士

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

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

解释

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

上的文档Form.Item描述了这个道具：

valuePropName：子节点的 props，例如 Switch 的 props 为 'checked'。该prop是对 的封装getValueProps，自定义后无效getValueProps

后来它描述了包装是如何发生的：

被Form.Itemwithname属性value（或 定义的其他属性valuePropName）onChange（或 定义的其他属性trigger） props 包裹后，将被添加到表单控件中，表单数据的流向将由 Form 处理...