警告：ant Checkbox: value is not a valid prop，你是说选中了吗？

Question

在 ant design v4 中使用 Form 时，我很难在 Form.Item.

中使用 CheckBox

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

以上代码出现以下错误：

Warning: [ant:Checkbox] value is not a valid prop, do you mean checked?

如何在 ant design v4 中的 Form.Item 中使用 CheckBox？

Answer 1

对复选框表单项使用 valuePropName：

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

valuePropName 的默认值是 value，这对输入字段是正确的，但对复选框或开关不正确。

警告：ant Checkbox: value is not a valid prop，你是说选中了吗？

Warning: ant Checkbox: value is not a valid prop, do you mean checked?

javascript

reactjs

antd