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


應用場景描述:

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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM