如何使用react-virtualized-select快速过滤器

时间:2017-03-13 11:20:20

标签: reactjs redux redux-form react-select

我很乐意使用react-virtualized-select和bvaughn的react-select-fast-filter-options。我在这里提到了示例fastfilteroptions

相关代码:

import { createSelector } from 'reselect';
import createFilterOptions from 'react-select-fast-filter-options';


export const getIndexedOptions = createSelector(
    state => state.companyreducer.options,
    options => createFilterOptions({options})
    )

在调试时,我可以看到访问了redux存储并加载了选项数组。

现在选择组件

 class renderTypeahead extends React.Component {
    constructor(props) {
        super(props)
        this.onInputChange = this.onInputChange.bind(this);

        this.state = {
            companies: [],
            selectedCompany: ''
        }

    }
    onInputChange(value) {
        this.props.fetchData(value);
    }

    onChange(event) {
        console.log(event);


        if (this.props.input.onChange && event != null) {

            this.props.input.onChange(event.CompanyDescription);

        } 
    }


    render() {

    const { selectedCompany } = this.state;
    const { options, companies } = this.props;

    return(
        <Select


        labelKey='CompanyDescription'

        filterOptions = {options.filterOptions}
        onBlur = {() => this.props.input.onBlur(this.props.input.value) }
        onChange={this.onChange.bind(this)}
        onInputChange={(value) => this.onInputChange(value)}
        options={companies}value={this.props.input.value}
        valueKey='CompanyID'/>
        )
    }
}

        function mapStateToProps(storeState) {

            return { 
                companies: storeState.companyreducer.options,
                options: getIndexedOptions(storeState)

            }
        }

        function mapDispatchToProps(dispatch) {
            return {

                fetchData: (inputChars) => dispatch(fetchCompanyOptions(inputChars))
            }
        }   

export default connect(mapStateToProps,mapDispatchToProps)(renderTypeahead) 当我运行这个并单击下拉箭头时,我可以看到公司列表但是在键入搜索时我没有找到结果。任何帮助将不胜感激。

0 个答案:

没有答案