在React js中使用Reactstrap從多個選擇下拉列表中動態選擇選項

Question

我有以下功能：

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(/"/g,'"'));
 console.log(typeof data); 
 console.log(data);

有什么辦法可以把這些東西拉出來嗎？

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

反應選擇文檔

Answer 2

我能夠這樣解決：

loadTag(data, td) {
  data = JSON.parse(data.replace(/"/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);
}