如何有多个反应选择选项答案

【问题标题】：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
  />

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

【问题讨论】：

标签： javascript reactjs

【解决方案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
      } 
    })
  };

【讨论】：