AntdPro中-ProFormSelect组件的使用说明

AntdPro是对antd又进行了一次封装,相比antd使用起来方便了许多。但是最近初次使用的时候,还是踩了很多坑,这里就记录一下:

对于带搜索功能的select选框,是比较常用的,但是这次在说使用的时候,选中了选项之后并没有清空搜索框,也就是下图这样的情况:

 其实熟悉antd的朋友都知道,配置 autoClearSearchValue:true, 即可,但是我给了autoClearSearchValue属性之后,会有错误抛出,会提示你ProFormSelect上没有autoClearSearchValue属性。包括如果使用表单项的onChange事件也会有错误抛出

如下图:

 后来查看了官方文档也没有这方面的说明,最后无意中看到,配置mode: 'multiple' 是在fieldProps这样一个属性里面配置的,于是就尝试了在这里面配置刚才的autoClearSearchValue属性以及使用onChange事件,发现就不会有错误提示了。

配置项:

<ProFormSelect
   label="负责人员:"
   name="name"
   valueEnum={{
    1: '小王',
    2: '小刘',
    3: '小李',
   }}
   showSearch //开启搜索

   fieldProps={{
    mode: 'multiple', //多选
    autoClearSearchValue:true,//选中后清空搜索框
    //使用onChange onBlur
    onChange:(value)=>{
       return value //必须要return一个值出去 表单项才会展示值在输入框上
    },
    // onBlur
   }}
  colProps={{ span: 8 }}  //在整个的ProForm表单中栅格化展示表单

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值