react+antd实现下拉框输入

该博客介绍了如何在React应用中利用Select组件进行搜索筛选,并在用户选择时更新表单字段值。通过监听onSearch事件和onChangeSelect回调,实现了选中值与表单的同步。示例代码展示了如何设置allowClear、showSearch及filterOption属性,以及如何遍历数据生成Select选项。
摘要由CSDN通过智能技术生成

const onChangeSelect = value => {// onSearch对应方法
  if(value){// 在最后一次点击也就是失去焦点时是没有值得,所以需要判断
    form.setFieldsValue({ // 设置表单值
      phoneType:value
    })
  }
}


<Select onClick={type} placeholder="请选择" allowClear showSearch filterOption={false} onSearch={onChangeSelect}>
                                {
                                    typeList.map((item, index) => {
                                        return <Select.Option key={index} value={item} >
                                            {item}
                                        </Select.Option>
                                    })
                                }
                            </Select>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值