警告:蚂蚁复选框:值不是一个有效的道具，你的意思是检查

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

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

警告：[ant:Checkbox]value不是有效道具，你是指checked吗？

如何在蚂蚁设计v4中的Form.Item中使用CheckBox？

Answer 1

对复选框表单项使用valuePropName：

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

valuePropName的默认值是value，它适用于输入字段，但不适用于复选框或开关。