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中获取复选框的当前值。

Answer 1

tl；博士

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

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

解释

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

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

valuePropName : 子节点的属性，例如 Switch 的属性是 'checked'。 该prop是对getValueProps的封装，自定义getValueProps后会失效

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

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