如何有多个反应选择选项

Question

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

我在构造函数中有这个

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

这里是handleChange function

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

我将如何实现这一点，以便我可以拥有 3 个 select 选项，例如：

  <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
  />

在我更新一个 select 的那一刻，它们都得到了更新。 我知道这是因为 function 但是我不确定如何创建一个特定 select 的值存储在 state 中的值。

Answer 1

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

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

Answer 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
  />

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

Answer 4

React-Select 已经支持多选。 当您可能只需要一个组件时，您似乎正在实现 3 个单独的 forms，因为您包含了isMulti选项。 如果您使用 3 组不同的选项，您将希望在不同的状态下以不同的方式处理它们。 拥有 3 个单独的输入 forms 来处理一个多选有点多余。 从文档中，这将允许您以一种形式选择多个项目。

此外，如果可能，建议您转换到 React 函数式钩子。 这将使您的 state 的处理变得更加容易。

import React from 'react';

import Select from 'react-select';
import { colourOptions } from '../data';

export default () => (
   <Select
      defaultValue={[colourOptions[2], colourOptions[3]]}
      isMulti
      name="colors"
      options={colourOptions}
      className="basic-multi-select"
      classNamePrefix="select"
   />
);

如果您正在寻找 select 各种选项，请查看 [https://stackoverflow.com/questions/52001629/select-all-unselect-all-option-in-react-select/73748176#73748176]