在 React js 中使用 Reactstrap 从多选下拉列表中动态选择选项答案

【问题标题】：Dynamically Select Options From Multiple Select Dropdown With Reactstrap In React js在 React js 中使用 Reactstrap 从多选下拉列表中动态选择选项
【发布时间】：2019-09-30 14:19:58
【问题描述】：

我有以下功能：

loadTag(data, td) {
    var tag = this.state.session.tag.map((el) => 
    $.inArray( el.name, data ) ? 
    <option key={el.name} value={el.key} defaultValue>{el.name}</option> : 
    <option key={el.name} value={el.key}>{el.name}</option>);
    ReactDOM.render(
      <Input type="select" className="dropselect_tag" name="tag" multiple>
        {tag}
      </Input>,
      td);
}

我希望能够在我的选择下拉菜单中提供的选项列表中动态选择多个选项。对于我的选择下拉菜单，我正在使用 reactstrap 和 select2 插件，它会初始化但没有选择任何内容。

我也试过这个：

loadTag(data, td) {
    var tag = this.state.session.tag.map((el) => 
    <option key={el.name} value={el.key}>{el.name}</option>);
    ReactDOM.render(
      <Input type="select" className="dropselect_tag" defaultValue={data} name="tag" multiple>
        {tag}
      </Input>,
      td);
}

但它不会产生任何结果。而且我很确定我正在发送像["item"] 这样的数组。我从我的数据库中解析我的数组并像这样进行测试：

 data = JSON.parse(data.replace(/&quot;/g,'"'));
 console.log(typeof data); 
 console.log(data);

有没有办法把这些东西拿出来？

【问题讨论】：

标签： javascript reactjs jquery-select2 reactstrap

【解决方案1】：

我的建议是使用 react-select，它可以优雅地选择多个。可以试试吗？

npm install react-select

import React, { Component } from 'react'
import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

const MyComponent = () => (
  <Select options={options} />
)

react-select docs

【讨论】：

谢谢，我也是这个作品。但我能够解决它

【解决方案2】：

我能够通过这种方式解决它：

loadTag(data, td) {
  data = JSON.parse(data.replace(/&quot;/g,'"'));
  var tag = this.state.session.tag.map((el) => <option key={el.index} value={el.index}>{el.index}</option>);
  ReactDOM.render(
      <Input type="select" multiple={true} defaultValue={data} className="dropselect_tag" name="tag">
        {tag}
      </Input>,
      td);
}

【讨论】：