ant design (antd) FormItem getFieldDecorator Checkbox 無法選中的解決方案
阿新 • • 發佈:2019-01-02
本文出自:
先給案例:
<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,此時不寫元件也達到了效果