Question

我正在尝试通过Elasticsearch实现此功能，并且它正在运行，但是我如何强制显示结果可能与搜索到的字词有所不同？例如，我搜索ardino，Elasticsearch给我一个单词arduino，但是react-select不会显示该结果，因为ardino不包含arduino。我知道这个库的想法就是这样，并且可以正常工作，但是我已经实现了大多数东西，只是缺少了那一部分。

句柄给出正确的行为，并且正确填充了选项。

谢谢

<Select
  name= {this.state.selectedOption}
  value={this.state.selectedOption}
  isSearchable={true}
  onChange = {(val) => {

    this._handleSearch(val.value)
  }}
  onInputChange = {(val) => {

    this._handleSearch(val)
  }}
  options={this.state.options}
/>

Answer 1

我建议使用Async component，它可以简化您的代码。您将不再需要onChange处理程序。

isSearcheable是true by default，无需指定。

回答您的问题：确保在每个结果选项中传递label和value键。如果要自定义任何结果，例如在结果中添加搜索词，则可以手动操作options数组。

import React, {Component} from 'react';
import AsyncSelect from 'react-select/lib/Async';

class Search extends Component {

    state = {inputValue: ""}

    onInputChange = (inputValue) => {
        this.setState({ inputValue });
    };

    getSearchResults = async (inputValue) => {
        // elastic search results
        let options = await fetch(`searchElastic/${inputValue}`);

        // input value of drop-down
        const inputValue = this.state.inputValue;

        // manually add input field as an option in drop-down
        if (inputValue.length > 0)
            options.unshift({label: inputValue, value: inputValue})

        // async handling of new props
        return options.map(opt => {
            return {label: opt.name, value: opt.value}
        })
    }

    render() {
        return <AsyncSelect
            onInputChange={this.onInputChange}
            loadOptions={this.getSearchResults}
        />
    }
}

export default Search;

使用Elasticsearch强制反应选择以显示所有选项

1 个答案: