警告：ant 复选框：值不是有效的道具，您的意思是选中吗？

Question

在

ant design v4

中使用 Form 时，我在

CheckBox

中使用

Form.Item

时遇到困难。

const [form] = useForm();

useEffect(() => {
    form.setFieldsValue({
        title: '',
        billable: false,
    })
}, []);

const onFieldsChange = (changedFields, allFields) => {
    console.log('onFieldsChange.changedFields => ', changedFields);
    console.log('onFieldsChange.allFields=> ', allFields);
}

return (
    <Form form={form} onFieldsChange={onFieldsChange}>
        <Form.Item label="title" name="title">
            <Input />
        </Form.Item>
        <Form.Item label="Billable" name="billable">
            <CheckBox />
        </Form.Item>
    </Form>
);

上面的代码给了我以下错误：

警告：[ant:Checkbox]

value

不是有效的道具，您的意思是

checked

吗？

如何在

ant design v4

中的

CheckBox

中使用 Form.Item？

Answer 1

使用 valuePropName 作为复选框表单项：

<Form.Item label="Billable" name="billable" valuePropName="checked">
  <Checkbox />
</Form.Item>

valuePropName

的默认值为

value

，这对于输入字段是正确的，但对于复选框或开关则不正确。

Answer 2

接受的答案对我不起作用，所以我不得不使用文档中给出的客户。

<Form.Item
          name="termsAccepted"
          valuePropName="checked"
          rules={[
            {
              validator: (_, value) =>
                value
                  ? Promise.resolve()
                  : Promise.reject(new Error("Should accept agreement")),
            },
          ]}
        >
          <Checkbox checked={Form.useWatch("IsCurrentRecord", form)}>
            I agree that I have read and accepted
          </Checkbox>
        </Form.Item>