React——antd4中遇到的 Select 坑

Dear 丶 2021-08-30 23:22 698阅读 0赞

如果要动态渲染 `Options` ，还要在`Select`上设置这个属性：

filterOption={ false}

也就是：

import React from 'react'
    import {  Select } from 'antd'
    const {  Option } = Select;
    
    export default class AtSelect extends Component{ 
        render(){ 
            const {  list } = this.state;
            return(
                <Select
                    placeholder="请选择"
                    filterOption={ (input, option) =>
                    	// 异步动态加载 option 的时候一定要加
    					option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    				}
                    onSearch={ this.handleSearch}
                >
                    { 
                        list.map((item, index) => (
                            <Option key={ index} value={ item}>{ item}</Option>
                        ))
                    }
                </Select>
            )
        }
        ...
    }

否则的话，是不会动态更改`option`里的值的，因为`filterOption`默认为true, 当你输入内容时候,会先在已有选项里面寻找符合项, 无论是否找到，都会重新渲染`Option`, 这样你接口请求的数据的渲染被覆盖了, 自然看不到结果了。所以需要将其设置为`false` 或者写一个过滤的方法来关闭它的自动筛选功能。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/a7c43a872fc545f198f7c8f8f3bf0fd2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，698人围观）

还没有评论，来说两句吧...

相关阅读

相关 docker中遇到的坑

-------------------------------------------------------------------------------------...

快来打我*/ 2024年04月17日 05:34/ 0 赞/ 78 阅读

相关 neo4j安装遇到的坑

文章目录 neo4j安装过程中遇到的坑一、环境说明二、安装文件获取三、环境配置 3.1 验证jav

落日映苍穹つ/ 2023年02月28日 01:30/ 0 赞/ 12 阅读

相关 Disruptor中遇到的坑

经朋友推荐，我在项目采用lmax的disruptor无锁队列框架来实现异步记录监控统计信息。disruptor体积很小，功能强大，一路配置下来，很容易上手，而且经过测试发现确实

Bertha 。/ 2022年05月14日 02:09/ 0 赞/ 547 阅读

相关 Spring中遇到的坑

Caused by: org.xml.sax.SAXParseException; lineNumber: 20; columnNumber: 78; cvc-complex-

悠悠/ 2022年03月22日 10:17/ 0 赞/ 313 阅读

相关 SpringAOP中遇到的坑

严重: Caught exception while allowing TestExecutionListener \[org.springframework.test.con

小咪咪/ 2022年03月20日 21:26/ 0 赞/ 364 阅读

相关工作中遇到的坑汇总

1：图片产生了收缩效果，通过outline：1px solid transparent; 参考文章：https://stackoverflow.com/questions/

Dear 丶/ 2022年02月19日 22:59/ 0 赞/ 287 阅读

相关 ssm中调试遇到的坑

1.在前端页面调用spring中的modelandview中的对象时，开头必须小写 <td>${course.courseGREED}</td> 其实是el表达式

ゝ一世哀愁。/ 2021年12月05日 04:47/ 0 赞/ 344 阅读

相关 elementUI使用中遇到的坑

1、通过el-upload获取到的文件file是封装后的，其中与普通input type=file 中获取到的文件是elementUI中的file.raw; 如果在读取文

柔情只为你懂/ 2021年09月17日 01:54/ 0 赞/ 837 阅读

相关 React——antd4中遇到的 Select 坑

如果要动态渲染 `Options` ，还要在`Select`上设置这个属性： filterOption={ false} 也就是： import Reac

Dear 丶/ 2021年08月30日 23:22/ 0 赞/ 699 阅读

相关 mapbox中遇到的坑

位置搜索控件宽度调整无效果 <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-

我会带着你远行/ 2021年07月25日 20:30/ 0 赞/ 814 阅读