关于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>

转载于:https://www.cnblogs.com/weblinda/p/9637183.html