代码之家 › 专栏 › 技术社区 › ThinkAndCode

在Select元素(react Select)中显示选项后,如何禁用可搜索性?

react-select reactjs

ThinkAndCode · 技术社区 · 7 年前

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>
    );
}

通过使用“可搜索”属性,我们可以启用或禁用选择组件。但基于某些条件,我不知道如何做到这一点。这里有谁能给点建议吗。

1 回复 | 直到 7 年前

user8235301 user8235301 7 年前

你最好试试看,

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

推荐文章