Question

我具有以下功能：

bind

我希望能够在我的选择下拉列表中提供的选项列表中动态选择多个选项。对于我的选择下拉列表，我使用的是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"]

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

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

react-select docs

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

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

2 个答案: