react 可搜索的下拉列表

js代码

import React, { PropTypes, Component, findNodeHandle, UIManager } from 'react';
import qs from 'qs';
import request from '../../utils/request';
import styles from './patrol.less'
import { Tabs, WhiteSpace, List, Icon, Steps, WingBlank, Flex, Button, TextareaItem, Toast, InputItem } from 'antd-mobile';

class DropDownList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showValues: false,
            value: undefined,
            placeholder: "请选择",
            editable: true,
            disabled: false,
            data: [],
            boxWidth: 100,
            showDataList: true,
            pageNo: 1,
            pageSize: 15
        }
        this.loadData = this.loadData.bind(this)
    }
    componentDidMount() {
        if (this.refs.box) {
            this.setState({ boxWidth: this.refs.box.offsetWidth })
        }
    }
    render() {
        const { data, value, editable, disabled, placeholder, showDataList, boxWidth } = this.state
        return (
            <div style={{ position: "relative" }} ref="box">
                <List>
                    <InputItem className={styles.searchBox} ref="inputBox"
                        value={value} editable={editable} disabled={disabled}
                        extra={
                            <Icon type={data && data.length > 0 && showDataList ? "up" : "down"} size="md" onClick={() => {
                                if (data && data.length > 0 && showDataList) {
                                    this.setState({ showDataList: false })
                                } else {
                                    this.refs.inputBox.focus()
                                }
                            }} />
                        }
                        clear={true}
                        placeholder={placeholder}
                        onChange={this.onChange.bind(this)}
                        onFocus={this.onFocus.bind(this)}
                        onBlur={() => [
                            setTimeout(() => {
                                this.setState({ showDataList: false })
                            }, 50)
                        ]}
                    />
                    {data && data.length > 0 && showDataList ?
                        <ul
                            className={styles.menuList}
                            style={{ width: boxWidth }}
                            onScroll={event => { this.onScrollEvent(event) }}
                        >
                            {
                                this.state.data.map((item, index) => {
                                    return (
                                        <li className={styles.menuItem} key={index} onClick={this.onItemClick.bind(this, item)}>{item.text}</li>
                                    )
                                })
                            }
                        </ul>
                        : ""}
                </List>
            </div>
        );
    }
    //加载数据
    async loadData(isClearOld, text) {
        const { url, filter,isCache, textField, valueField} = this.props
        const { data, value, pageNo, pageSize } = this.state
        if (url) {
            if (text) {
                param={col:textField,value:text}
            }
            let { data: reserveDate } = await request(url, param, { method: "POST", isPost: true })
            if (reserveDate.status == 0) {
                let newData = reserveDate.rows.map(item => {
                    return {
                        text: item[textField],
                        value: item[valueField]
                    }
                })
                if (isClearOld) {
                    this.setState({ data: newData })
                    this.pageNo = 1
                } else {
                    let oldData = data
                    this.setState({ data: oldData.concat(newData) })
                    this.pageNo++;
                }
            }
        }
    }
    //滚动
    onScrollEvent(e) {
        const { clientHeight, scrollHeight, scrollTop } = event.target;
        const isBottom = scrollTop + clientHeight == scrollHeight;
        //滑动到底部
        if (isBottom) {
            this.loadData(false,this.state.value)
        }
    }
    //list 点击事件
    onItemClick(data) {
        this.setState({
            value: data.text,
            showDataList: false,
            selectData: data
        })
        if (this.props.onChange) {
            this.props.onChange(data.value)
        }
    }
    //input onchange
    onChange(value) {
        this.setState({ value: value })
        if (this.props.onChange) {
            this.props.onChange(value)
        }
        this.loadData(true, value)
    }
    //input得到焦点
    onFocus() {
        //input获取到焦点时调用
        if (this.props.onFocus) {
            const focusRes = this.props.onFocus()
            if (focusRes) {
                return
            }
        }
        const { data } = this.state
        this.setState({ showDataList: true })
        if (data && data.length == 0) {
            this.loadData(true)
        }
    }
    // 点击图标
    iconClick() {
        this.setState({})
    }
}

export default DropDownList;

css样式

.searchBox {
    width: 100%;
    height: 35px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
}

.searchInput {
    height: 32px;
    border: none;
    padding: 3px;
}

.searchIcon {
    width: 30px;
    height: 30px;
    // background-image: url("../images/search.svg");
    background-size: 30px 30px;
    float: right;
    cursor: pointer;
    margin-right: 5px;
}

.menuList {
    // width: 300px;
    // border: 1px solid #eee;
    max-height: 200px;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
    position: fixed;
    background: #fff;
    z-index: 999;
    list-style: none;
    box-shadow: 2px 2px 2px 2px #eee,-2px 2px 2px 2px #eeefff;
    border-radius: 5px;
}
.hiddenMenuList{
    display: none;
}
.menuItem{
    line-height:40px;
    text-align:left;
    padding-left: 5px;
    // border-bottom:1px solid #eee;
}
.menuItem:hover{
    background: #d9e2f3;
    font-weight: bold;
}

使用

                                <DropDownList
                                    url="api/YtRole/GetData"
                                    moduleCode="PMS_ROLE_MNG"
                                    textField="Role_Name"
                                    valueField="Id"
                                    onChange={value => {
                                        debugger
                                    }}
                                />