antd select另类使用引起的情况问题解决_antd 的select筛选时虚拟列表会消失再出现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38189542/article/details/136485287

文章讲述了在使用AntD5.0.5版本构建项目时，如何通过Select组件实现关键字过滤并处理路由跳转后的Select内容清除问题。作者发现将Select的value属性设置为null可以解决选中内容残留问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

因为在做公司项目有个需求就是根据关键字来过滤路由，然后点击对应的路由进行跳转。为了使用该方案，我们使用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,
          }))}