ant design (antd) FormItem getFieldDecorator Checkbox 无法选中的解决方案

本文出自：

http://blog.csdn.net/wyk304443164

先给案例：

<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上面的，为什么呢？请留意

https://ant.design/components/checkbox-cn/

组件中有checked属性，并没有我们一贯使用的value属性。

个人理解(因为我并没有再去查看antd的文档)：

1. getFieldDecorator()()，该方法第一个方法执行完毕会自动给第二个括号内添加value属性，同时监听onChange()
2. 所以刚刚上面讲了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更新////////////////////////

https://ant.design/components/form-cn/

这边搜索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，此时不写组件也达到了效果