Javascript React-Ant设计，带有getFieldDecorator和initialValue的表单在单个chechbox中不起作用

我正在使用Ant Design创建一个表单，当我尝试在单个复选框中使用带有initialValue的getFieldDecorator时遇到问题

initialValue与checkbox的值不正确匹配，下面是一个示例

Form {...formItemLayout} onSubmit={this.handleSubmit}>
    <Form.Item label="Checkbox">
      {getFieldDecorator("checkbox-1", {
        initialValue: "A"
      })(<Checkbox value="A">A</Checkbox>)}
    </Form.Item>

    <Form.Item label="Checkbox">
      {getFieldDecorator("checkbox-2", {
        initialValue: true,
        valuePropName: "checked"
      })(<Checkbox>A</Checkbox>)}
    </Form.Item>
  </Form>

Form{…formItemLayout}onSubmit={this.handleSubmit}>
{getFieldDecorator（“复选框-1”{
初始值：“A”
})（A） }
{getFieldDecorator（“复选框-2”{
initialValue:true，
valuePropName：“选中”
})（A） }

在这种情况下，应选中开头的复选框-1，因为初始值与复选框值相同，但未选中

我犯了什么错

我还插入了带有代码的链接：

在使用时，

initialValue

将覆盖给定组件上的

value

属性

options.initialValue-您可以指定初始值、类型和可选值 子节点的值。（注意：因为表单将测试与 ==在内部，我们建议使用变量作为初始值，而不是文字）

但在您的情况下，

复选框

没有

值

属性

相反，您需要使用

valuePropName

并指定

initialValue

属性

options.valuePropName-子节点的道具，例如 开关已“检查”

因此，

initialValue:“A”

没有任何意义，例如，如果使用，则可能是真的

此外，您可以对初始值使用道具或状态，如

initialCheckBoxValue

：

类演示扩展了React.Component{
render（）{
const{getFieldDecorator}=this.props.form；
返回(
{getFieldDecorator（'Select'{
初始值：“B”
})(
A.
B
)}
{getFieldDecorator（'checkbox-1'{
initialValue:this.props.initialCheckBoxValue，
valuePropName:“选中”
})（A） }
{getFieldDecorator（'checkbox-2'{
initialValue:true，
valuePropName:“选中”
})（B） }
);
}
}
const DemoForm=Form.create（）（演示）；
ReactDOM.render(
,
document.getElementById（'root'））
);

---

值PropName:“已选中”仅限于复选框。见下文：

{getFieldDecorator（'propname'{
valuePropName:“选中”
})(
复选框文本
)}

不要设置

defaultChecked

，因为这会干扰值，因为它是在复选框本身上设置的

如果绑定不能自动工作，请使用

mapPropsToFields

自行指定绑定。请参见下面的完整示例：

const BuildingCRUD=Form.create({
名称：“组织形式”，
mapPropsToFields（道具）{
返回{
名称：Form.createFormField({
值：props.name，
}),
地址：Form.createFormField({
值：props.address，
}),
numberOfApartments:Form.createFormField({
价值：道具。公寓数量，
}),
邮政编码：Form.createFormField({
值：props.postcode，
}),
停车场：Form.createFormField({
价值：道具、停车场、，
}),
id:Form.createFormField({
值：props.id，
}),
};
},
})（（道具）=>{
const{getFieldDecorator}=props.form；
返回(
{getFieldDecorator（“名称”{
规则：[{required:true，消息：“Building name is required”}]，
})(
)}
{getFieldDecorator（“地址”{
规则：[{required:true，消息：“Building address is required”}]，
})(
)}
{getFieldDecorator（“邮政编码”{
规则：[{required:true，消息：“Building postcode is required”}]，
})(
)}
{getFieldDecorator（“停车场”）{
valuePropName:“选中”，
})（可用停车位）}
);
});
导出默认BuildingCRUD；

我需要使用复选框而不是选择，一些想法？我更新了答案，现在可能更清楚了，只需使用状态/道具，还修复了代码沙盒链接