驗證 [] 發現 orm const 解決方案 限制 message pro

應用場景描述：

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>

關於antd Select 限制選擇個數的解決方案