表单提交后Antd 4 Checkbox没有价值答案

【问题标题】：Antd 4 Checkbox doesn't have value after form submit表单提交后Antd 4 Checkbox没有价值
【发布时间】：2021-04-18 03:13:45
【问题描述】：

我有什么

我有一个带有复选框的 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 中获取复选框的当前值。

【问题讨论】：

标签： javascript forms checkbox antd

【解决方案1】：

tl;博士

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

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

说明

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

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

valuePropName：子节点的props，例如Switch的props是'checked'。这个prop是getValueProps的封装，自定义getValueProps后会失效

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

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

【讨论】：