0
我使用react-widget的DropdownList组件。在我的代码中，有几个下拉菜单可以从Ajax调用中获取它们的值。其中一些语言如语言列表太大，从Ajax获取列表并渲染它（需要4到5秒！）非常慢。我想向dropdwon提供一个小的语言列表和一个'Extend'或'Load Full List'选项;如果点击扩展，下拉列表将会刷新完整的语言列表。 这里是我的解决方案：父组件的代码：带延伸选项的下拉列表
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} />
);
}
});
但它并不好看：当用户选择“加载完整列表“，下拉列表将被关闭，用户需要再次点击以查看更新列表。有没有人有更好的解决方案或建议来改善我的代码？
图片显示了它现在的样子！此链接
