Question

我正在使用react-widget中的DropdownList组件。在我的代码中，有几个下拉列表从Ajax调用中获取它们的值。其中一些，如语言列表，太大，从Ajax获取列表并渲染它（需要4到5秒！）非常慢。我想向dropdwon提供一小部分语言和一个＆＃39; Extend＆＃39;或者＆＃39;加载完整列表＆＃39;选项;如果点击Extend，下拉列表将使用完整的语言列表进行刷新。这是我的解决方案：父组件的代码：

const languages = ajaxCalls.getLanguages();
const langs = {"languages": [["eng", "English"], ["swe", "Swedish"], ["deu", "German"], ["...", "Load Full List"]]};
const common_langs = langs.languages.map(([id, name]) => ({id, name}));

<SelectBig data={common_langs} extend={languages} onSelect={x=>this.setValue(schema, path, x)} value={this.getValue(path)} />;

以下是SelectBig组件的代码：

import React from 'react/lib/ReactWithAddons';
import { DropdownList } from 'react-widgets';

const PT = React.PropTypes;

export const SelectBig = React.createClass({
    propTypes: {
        data: PT.array,
        value: PT.string,
        onSelect: PT.func.isRequired,
    },

    maxResults: 50,

    shouldComponentUpdate(nextProps, nextState) {
        console.log("nextProps = " , nextProps, " , nextState = ",  nextState);
        const len = x => (x && x.length !== undefined) ? x.length : 0;
        // fast check, not exact, but should work for our use case
        return nextProps.value !== this.props.value
            || len(nextProps.data) !== len(this.props.data);
    },

    getInitialState(){
        return {
            lastSearch: '',
            results: 0,
            dataList: [],
        };
    },

    select(val) {
        if(val.id === "..."){
            this.setState({dataList: this.props.extend})
        }
        this.props.onSelect(val.id);
    },

    filter(item, search) { .... },

    renderField(item) {  ....  },

    render() {
        const busy = !this.props.data;
        let data;
        if(!this.props.extend){
            data = this.props.data || [];
        } else {
            data = this.state.dataList;    
        }

        return (
            <DropdownList
                data={data}
                valueField='id'
                textField={this.renderField}
                value={this.props.value}
                onChange={this.select}
                filter={this.filter}
                caseSensitive={false}
                minLength={2}
                busy={busy} />
        );
    }
});

但它并不好看：当用户选择“加载完整列表”时，下拉列表将关闭，用户需要再次单击以查看更新列表。有没有人有更好的解决方案或建议来改进我的代码？

图片展示了它现在的样子！

Answer 1

https://www.npmjs.com/package/react-select-2 最好使用此链接，它将起作用

带有扩展选项的下拉列表

1 个答案: