antd select另类使用引起的情况问题解决

概述

因为在做公司项目有个需求就是根据关键字来过滤路由,然后点击对应的路由进行跳转。为了使用该方案,我们使用AntD的Select组件+搜索来实现,但是在实现过程中,遇到Select的PlaceHolder不显示的问题,最后各种摸索,把问题解决,博文记录,用于备忘。

框架版本
AntD 5.0.5
UmiJS Max

问题描述

Select的内容出来了,点击对应的Item,路由跳转了,但是Select的内容还保留着,我们的想法是跳转后对应控件的内容也跟着清空,但是在测试过程中,不管我是将Select的值设置为空字符(‘’)、null或者undefined,选中的内容还是一样挂在组件上。
后面发现该value,代码并没有使用,故在初始dom的时候,直接设置属性为null,解决了问题

        <Select
          ref={selectRef}
          allowClear={true}
          style={{ width: '100%' }}
          showSearch
          placeholder="请输入检索内容"
          value={null} //这里
          defaultActiveFirstOption={false}
          suffixIcon={null}
          filterOption={false}
          onSearch={handleSearch}
          onSelect={handleSelect}
          onChange={handleChange}
          onFocus={handleFocus}
          notFoundContent={null}
          options={(data || []).map((d) => ({
            value: d.path,
            label: d.name,
          }))}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值