如何在Select元素(react-select)中显示选项后禁用可搜索的能力?

时间:2017-07-27 17:31:57

标签: reactjs react-select

我正在异步传递选项以选择element.Anyway我希望有一个条件来检查传递了多少选项。如果选项是< = 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>
    );
}

使用&#34; searchable&#34;属性我们可以启用或禁用选择组件。但我根据某些条件不知道如何做到这一点。任何机构都可以在这里提出任何建议。

1 个答案:

答案 0 :(得分:0)

你最好试试,

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'。