美文网首页
antdesign-select搜索功能

antdesign-select搜索功能

作者: JancyCC | 来源:发表于2020-06-11 10:00 被阅读0次

    filterOption
    import { Select } from 'antd';
    const { Option } = Select;

    function onChange(value) {
    console.log(selected ${value});
    }

    <Select
    size="default"
    showSearch //使单选模式可搜索
    defaultValue="请选择"
    suffixIcon={<Icon type="caret-down" />}
    style={{ fontSize: 13, boxShadow: 'none',width:"115px" }}
    dropdownClassName="dropdownWrapper"
    onChange={this.onChangeOption.bind(this)}
    filterOption={(input, option) =>
    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }

    <Option value="default">请选择</Option>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="tom">Tom</Option>
    </Select>


    官方文档提供demo:filterOption={(input, option) =>
    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },结果报错,打断点查到少了一层,正确代码如下:
    filterOption={(input, option) =>
    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    希望可以帮助遇到同样问题的伙伴。

    官方文档https://ant.design/components/select-cn/

    相关文章

      网友评论

          本文标题:antdesign-select搜索功能

          本文链接:https://www.haomeiwen.com/subject/zkvvtktx.html