React Ant设计，表单使用getFieldDecorator和initialValue不在单个复选框中工作
React Ant设计，表单使用getFieldDecorator和initialValue不在单个复选框中工作
提问于 2019-07-19 13:29:08
我正在用Ant创建一个表单，当我试图在一个复选框中使用getFieldDecorator和initialValue时，我遇到了一个问题。
initialValue与复选框的值不匹配，下面是一个示例。
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>在本例中，复选框-1在开始时应该被选中，因为initialValue与复选框值相同，但是没有选中。
我犯了什么错？
回答 2
Stack Overflow用户
发布于 2019-11-23 14:47:48
valuePropName: 'checked'仅限于复选框。见下文：
<Form.Item>
{getFieldDecorator('propname', {
valuePropName: 'checked'
})(
<Checkbox>Checkbox Text</Checkbox>
)}
</Form.Item>不要设置defaultChecked，因为这会干扰值，因为它是在复选框本身上设置的。
如果绑定不能自动工作，请使用mapPropsToFields自己指定绑定。见下文的完整示例：
const BuildingCRUD = Form.create({
name: "organisation_form",
mapPropsToFields(props) {
return {
name: Form.createFormField({
value: props.name,
}),
address: Form.createFormField({
value: props.address,
}),
numberOfApartments: Form.createFormField({
value: props.numberOfApartments,
}),
postcode: Form.createFormField({
value: props.postcode,
}),
parking: Form.createFormField({
value: props.parking,
}),
id: Form.createFormField({
value: props.id,
}),
};
},
})((props) => {
const { getFieldDecorator } = props.form;
return (
<Form style={{ maxWidth: "320px" }} onSubmit={handleSubmit}>
<Form.Item label="Name">
{getFieldDecorator("name", {
rules: [{ required: true, message: "Building name is required" }],
})(
<Input
prefix={
<Icon type="profile" style={{ color: "rgba(0,0,0,.25)" }} />
}
placeholder="Company name"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("address", {
rules: [{ required: true, message: "Building address is required" }],
})(
<Input
prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="Address"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("postcode", {
rules: [{ required: true, message: "Building postcode is required" }],
})(
<Input
prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
placeholder="Postcode"
/>
)}
</Form.Item>
<Form.Item>
{getFieldDecorator("parking", {
valuePropName: "checked",
})(<Checkbox>Available Parking</Checkbox>)}
</Form.Item>
</Form>
);
});
export default BuildingCRUD;Stack Overflow用户
发布于 2019-07-19 14:03:10
在使用 API时，initialValue将覆盖给定组件上的value属性。
options.initialValue -您可以指定子节点的初始值、类型、可选值。(注意:由于Form将在内部测试与===的相等性，我们建议使用变量作为initialValue，而不是文字)
但是在您的例子中，Checkbox没有value属性。
相反，您需要使用valuePropName并指定initialValue属性。
options.valuePropName -子节点的道具，例如，开关的支柱被“检查”。
因此，initialValue: "A"没有任何意义，如果您使用 component，则可能是正确的。
此外，您可以使用道具或状态作为初始值，如initialCheckBoxValue。
class Demo extends React.Component {
render() {
const { getFieldDecorator } = this.props.form;
return (
<FlexBox>
<Form>
<Form.Item label="Checkbox">
{getFieldDecorator('Select', {
initialValue: 'B'
})(
<Select>
<Select.Option value="A">A</Select.Option>
<Select.Option value="B">B</Select.Option>
</Select>
)}
</Form.Item>
<Form.Item label="Checkbox A">
{getFieldDecorator('checkbox-1', {
initialValue: this.props.initialCheckBoxValue,
valuePropName: 'checked'
})(<Checkbox>A</Checkbox>)}
</Form.Item>
<Form.Item label="Checkbox B">
{getFieldDecorator('checkbox-2', {
initialValue: true,
valuePropName: 'checked'
})(<Checkbox>B</Checkbox>)}
</Form.Item>
</Form>
</FlexBox>
);
}
}
const DemoForm = Form.create()(Demo);
ReactDOM.render(
<DemoForm initialCheckBoxValue={false} />,
document.getElementById('root')
);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57113541
复制相关文章
相似问题
腾讯云开发者
