應用場景描述:
Select 被form 所包裹,且被getFieldDecorator修飾。所以值的改變應該通過form的setFieldsValue方法。
Select模式肯定會是multiple。且以最多三個值舉例。
解決思路如下:
1 起初是想在Select的onchange事件中判斷values的數量,數量大於三個的時候來重新setFieldsValue;且把最后的選項值替換成剛剛選擇的值。
后來發現setFieldsValue方法不起作用,Select的值會一直增加。后來想想可能是 setFieldsValue與onchange 沖突,通過setFieldsValue 無法改變onchange后的值。
2 最后通過重新查看文檔。發現還有一個方法可用,即 validator。驗證值,通過驗證所選值的數量是否大於三個,然后重新setFieldsValue ;發現此法可行。從而解決該疑難雜症。
好,最后附上代碼供參考:
changeValues = (rule ,value , callback)=> {
const { setFieldsValue } = this.props.form ;
let newArr ;
if (value.length > 3){
newArr = [].concat(value.slice(0,2), value.slice(-1) ) ;
setFieldsValue({
"languages" : newArr ,
})
callback('最多選擇三種語言')
} else {
newArr = value ;
callback()
}
}
<FormItem>
{getFieldDecorator('languages', {
rules:[{required: true,message : '請選擇三種語言',
validator : changeValues
}],
validateTrigger : 'onChange',
})(
<Select mode='multiple' >
<Option key={1} value={1}>1</Option>
<Option key={2} value={2}>2</Option>
<Option key={3} value={3}>3</Option>
<Option key={4} value={4}>4</Option>
<Option key={5} value={5}>5</Option>
</Select>
)}
</FormItem>