react系列(2)--antd使用之select组件

一:select组件分页

react框架结合antd UI组件库使用时,如果使用到了Select下拉框,并且选项很多时,分页显示Select组件的选项似乎是必做的事情.

主要思路: 使用Select组件的onPopuoScroll属性,监听滚动条滚动的位置并在滚动到底部时获取下一页的选项数据

<Select     onPopupScroll={this.handleScroll.bind(this)}>

handleScroll(e) {
    e.persist();
    const { target } = e;
    const { pagination } = this.state;//这一步主要是为获取当前获取的选项值是多少页做准备
    if (target.scrollTop + target.offsetHeight >= target.scrollHeight) {//成立说明滑动到底部了
        pagination.current = pagination.current + 1;
        this.setState({pagination});//以上两步都是为了更新state中的数据
        getSelect(params);//根据指定的页数及其他参数获取新的选项信息
    }
} 
componentWillReceiveProps(nextProps) {
   this.state({...nextProps})
}

我在getSelect方法中获取数据时会改变state中的值,所以如果你的选项数据不是放在state中的,可能有差异,但解决思路肯定是一样的

二:select组件基本使用

<Select defaultValue="请选择" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>Disabled</Option>
      <Option value="Yiminghe">yiminghe</Option>
      <Option value="Yiminghe2">yiminghe2</Option>
</Select>

1.defaultValue指定的值应该与某一个Option中的value值对应,包括设置select的value也是.如果没有Option的value与之对应,则直接显示指定的值

2.select设置showSearch属性时,搜索的是Option的value,如果value和显示的值不一致那么搜索将不会生效.但是,有方法可以让select可以搜索,在showSearch下面加一个 optionFilterProp=“children”属性就可以了(其实就是给select组件加的).这篇博客也有介绍blog.csdn.net/u013790941/…