反应选择

灵活美观的ReactJS Select输入控件,具有多选,自动完成,异步和可创建的支持。

安装

yarn add react-select 

用法

 从'react'导入React; 
导入从“反应选择”中选择;
const options = [
{值:“巧克力”,标签:“巧克力”},
{值:“草莓”,标签:“草莓”},
{值:“香草”,标签:“香草”}
];
App类扩展了React.Component {
状态= {
selectedOption:null,
}
handleChange =(selectedOption)=> {
this.setState({selectedOption});
console.log(`Option selected:`,selectedOption);
}
render(){
const {selectedOption} = this.state;
返回(
<选择
值= {selectedOption}
onChange = {this.handleChange}
选项= {选项}
/>
);
}
}

道具

您可能要指定的常见道具包括:

  • autoFocus –挂载时集中控制
  • className –将className应用于控件
  • classNamePrefix –将classNames应用于具有给定前缀的内部元素
  • isDisabled –禁用控件
  • isMulti –允许用户选择多个值
  • isSearchable –允许用户搜索匹配选项
  • name –生成具有此名称的HTML输入,其中包含当前值
  • onChange –订阅变更事件
  • options –指定用户可以从中选择的选项
  • placeholder –更改未选择任何选项时显示的文本
  • value –控制当前值

查看道具文档以获取完整的文档

要禁用反应选择,如果选项包含超过20个数据,那么我们可以使用以下逻辑

  const options = [ 
{值:“巧克力”,标签:“巧克力”},
{值:“草莓”,标签:“草莓”},
{值:“香草”,标签:“香草”}
];
<选择
值= {selectedUser}
onChange = {this.userSelect}
closeMenuOnSelect = {false}
选项= {选项}

isOptionDisabled = {this.isDisabled} hideSelectedOptions = {false}
isMulti
/>
isDisabled =(选项)=> {
如果(this.state.options && this.state.options.length> = 2){
返回option.value = {};
}
};

新增图片

 从'../../../../../ assets / img / profile.png'; userData.push({ 
值:options.value,
标签:
{''} {chittieExistingUsers [key] .name}

});

为了允许重复的值并且不从选项中删除所选的项目,我们可以添加一个唯一的ID并传递值,以便我们允许重复的值(可以多次选择相同的选项)

  chittieUsers = Object.keys(users).map((key)=> { 
返回{值:
键+'_'+ timestamp ++
标签:
{''} {users [key] .name}

};
});

并添加道具

  hideSelectedOptions = {假} 

我们可以多次选择同一选项。