如何有多个反应选择选项

Posted

技术标签:

【中文标题】如何有多个反应选择选项【英文标题】:How to have multiple react-select options 【发布时间】:2021-03-02 04:00:46 【问题描述】:

我正在使用 react-select,以便用户可以从下拉菜单中选择多个选项,但是我希望能够在我的应用程序中使用多个 react-select。

我在构造函数中有这个

class OrderForm extends Component 
  constructor() 
    super();
    this.state = 
      selectedOption: [],
    ;
  

这里是handleChange函数

  handleChange = (selectedOption) => 
    this.setState( selectedOption , () =>
      console.log(`Option selected:`, this.state.selectedOption)
    );
  ;

我将如何实现这一点,以便我可以有 3 个这样的选择选项:

  <Select
   options=flavours
    value=selectedOption
    onChange=this.handleChange
    placeholder="Choose your first mix"
    isSearchable
    isMulti
  />

  <Select
   options=flavours
    value=selectedOption
    onChange=this.handleChange
    placeholder="Choose your second mix"
    isSearchable
    isMulti
  />

  <Select
   options=flavours
    value=selectedOption
    onChange=this.handleChange
    placeholder="Choose your third mix"
    isSearchable
    isMulti
  />

当我更新一个选择时,它们都会更新。我知道这是因为函数,但是我不确定如何创建一个将特定选择的值存储在状态中的函数。

【问题讨论】:

【参考方案1】:

解决方案很少。一种是您可以创建多个 handleChange 函数,每个选择器一个。每个人都可以设置不同的状态。如果您需要使用多个选择器更新同一个数组,则需要更复杂的逻辑来通过检查该值是否已存在于数组中来从单个数组中推/拉。

老实说,对于这样的事情,我建议使用表单并为每个选择器指定一个唯一的名称,不确定您是否熟悉,但 Formik 通过自动处理 onChange 内容使这样的事情变得非常容易。

【讨论】:

【参考方案2】:

您可以拥有三个(或任意数量)风味选项,然后分别设置它们:

this.state = 
  selectedOptions: [],
;


handleChange = index => selectedOption => 
    const updatedOptions = this.state.selectedOptions.map((o,i)=>i===index?selectedOption:o)
    this.setState( selectedOptions:updatedOptions );
  ;

<Select
   options=flavours
    value=selectedOption
    onChange=this.handleChange(0)
    placeholder="Choose your first mix"
    isSearchable
    isMulti
  />

<Select
   options=flavours
    value=selectedOption
    onChange=this.handleChange(1)
    placeholder="Choose your second mix"
    isSearchable
    isMulti
  />

【讨论】:

【参考方案3】:

您可以使用Select 组件的prop name 并使用onChange 方法的第二个参数访问它,如下所示。

你也最好对你的状态结构做一些改变:

this.state = 
      selectedOption: 
         first: ,
         second: ,
         third: 
      
;
   
  <Select
    options=flavours
    value=selectedOption.first
    name="first"
    ...
  />

  <Select
    options=flavours
    value=selectedOption.second
    name="second"
  />

  <Select
    options=flavours
    value=selectedOption.third
    name="third"
    ...
  />

 handleChange = (value, action) => 
    this.setState(
      selectedOption: 
        [action.name]: value
       
    )
  ;

【讨论】:

以上是关于如何有多个反应选择选项的主要内容,如果未能解决你的问题,请参考以下文章

如何设置反应选择选项的样式

如何根据最大选项宽度设置反应选择宽度?

反应表单钩子如何验证选择选项

如何在反应原生中过滤多个选择下拉字段中的数组值

如何使用带有选择选项表单元素的反应图标?

如何从单个反应组件中调用多个 graphql 突变?