我很乐意使用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) 当我运行这个并单击下拉箭头时,我可以看到公司列表但是在键入搜索时我没有找到结果。任何帮助将不胜感激。