反应选择

灵活美观的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个数据，那么我们可以使用以下逻辑

• 身份验证与授权
• 边干边学—构建中型RSS查看器
• 离子电容与Apache Cordova的差异示例—混合本机应用程序的下一个未来创新
• 通过一个简单的测验应用程序了解React编程模式
• 在5分钟内将React应用程序托管为WordPress主题！

  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 = {假} 

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