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