本文出自:
先给案例:
<FormItem
{...formItemLayout}
label="销售方式"
>
{getFieldDecorator('is_alone_buy', {
rules: [{
required: true, message: '请选择销售方式',
}],
})(
<Checkbox >单独购</Checkbox>
)}
{getFieldDecorator('is_group_buy')(
<MyCheckBox
onChange={this.onFormSetting}
text="阶梯团购"/>
)}
</FormItem>
这边的is_alone_buy是不能赋值到Checkbox上面的,为什么呢?请留意
组件中有checked属性,并没有我们一贯使用的value属性。
个人理解(因为我并没有再去查看antd的文档):
- getFieldDecorator()(),该方法第一个方法执行完毕会自动给第二个括号内添加value属性,同时监听onChange()
- 所以刚刚上面讲了Checkbox是没有value属性的。即getFieldDecorator()()没有办法把选中的值给Checkbox
问题解决方案:
class MyCheckBox extends React.Component {
render() {
return (
<Checkbox
checked={this.props.value}
onChange={this.props.onChange}>
{this.props.text}
</Checkbox>
);
}
}
- 自定义一个组件,来接收this.props.value属性,改变为checked属性
- 监听Checkbox的onChange属性,供getFieldDecorator()()方法监听
至此问题已经解决,其余的组件,如果没有onChange/value都可以参考此博客进行改善。
/2017/5/17更新
这边搜索switch
options.valuePropName 子节点的值的属性,如 Switch 的是 ‘checked’
<FormItem
label="图片"
labelCol={{span: 6}}
wrapperCol={{span: 18}}
>
{
getFieldDecorator('goods_img', {
valuePropName: 'fileList',
rules: [{required: true, message: '必填', type: 'array'}],
})(
<FileUploader multiple={false}/>,
)
}
</FormItem>
- 注意这边的valuePropName,是把 goods_img 的名字给转换成了 fileList 这样就能被FileUploader 识别
- switch 的 valuePropName可以修改成checked,此时不写组件也达到了效果