如何在 Select 元素（react-select）中显示选项后禁用可搜索功能？

Question

我正在将选项异步传递给 select element.Anyway 我想有一个条件来检查有多少选项 passed.If 选项 <=10，那么搜索应该是已禁用，如果选项 >10，则应启用搜索。这是我的代码，

render() {
    var getOptions = (input, callback) => {
        axios.get(url).then(function (response) {
                                  response.data.map(function(a){
                                                      a.value = a.id;
                                                      a.label = a.id;
                                                    });
                   callback(null,{options :response.data,complete : true});
            })
    } 

    return (
        <div className="col-md-6">      
          <div>Select List:</div>
             <Select.Async
                  loadOptions={getOptions}
                  onChange={this.onChange}
                  value={this.state.value}
                />
        </div>
    );
}

通过使用 "searchable" 属性，我们可以启用或禁用 [=20=] 组件。但我不知道如何根据某些条件做到这一点。任何人都可以在这里提出任何建议吗？

Answer 1

你最好尝试关注，

axios.get(url_large).then(function (response) {
            response.data.map(function(a){                                               
                                           a.value = a.id;
                                           a.label = a.title;
                                         });
                    this.setState({ options : response.data }) ;
                    if(response.data.length <= 10) {
                        this.setState({ disable : false }) ;
                    }
                    else {
                        this.setState({ disable : true }) ;
                    }
                    callback(null,{options :response.data,complete : true});

        }.bind(this));
}

这里 'disable' 是一个状态值，您必须先在构造函数中定义它，然后将其传递给您的 'Select' 属性 'searchable'.

如何在 Select 元素（react-select）中显示选项后禁用可搜索功能？

How to disable searchable ability after displaying the options in Select element(react-select)?

reactjs

react-select