温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用Antd实现下拉选择,自动匹配功能

发布时间:2020-10-26 14:27:27 来源:亿速云 阅读:497 作者:Leah 栏目:开发技术

使用Antd实现下拉选择,自动匹配功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<Select
  placeholder="客户名称"
  showSearch
  optionFilterProp="children"//自动匹配输入
  onChange={this.selectChange}
>
  {this.state.selectCustomer}
</Select>

补充知识:antd select如何支持既能输入不存在的选项又能进行下拉框选择

1.Select必须具备onSearch,onBlur,onChange这三个属性;

<Select
showSearch
value={this.state.value}
onSearch={…}
onBlur={…}
onChange={…}

{optionsFor}

2.在onSearch中使用回调,并设置

state {this.setState({ 'newState':val })}} onBlur={} onChange={...} > {optionsFor}

3.onChange设置回调

{this.setState({ 'newState':val })}} onBlur={} onChange={this.handleChange} > {optionsFor}

4.onBlur中利用三目判断,并返回输入的值

{this.setState({ 'newState':val })}} onBlur={()=>{ return this.state.newState&#63;this.handleChange:null }} onChange={this.handleChange} > {optionsFor}

5.最后一步,也是最重要的,必须利用delete命令移除在state中设置的newState;

let finalState = this.state; delete newState['newState]; this.setState({finalState})

看完上述内容,你们掌握使用Antd实现下拉选择,自动匹配功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI