javascript - 在 React js 中使用 Reactstrap 从多选下拉列表中动态选择选项
问题描述
我有以下功能:
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);
有什么办法可以把这些东西拿出来吗?
解决方案
我的建议是使用 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} />
)
推荐阅读
- python - python - 使用'with'语句后的变量范围
- android - ConstraintLayout 问题(最大宽度、尺寸比和链样式)
- cypress - 点击href加载空白页
- python-3.x - 如何在 tkinter 中将下拉菜单与顶级菜单相结合
- javascript - 如何正确更新 javascript 中的全局变量?
- laravel - 通过 Nginx 将 2 个域链接到 1 个 Laravel 项目
- python - Django:使用 html 模板 TemplateDoesNotExist
- python - 使用 Python 读取包含复杂字符串的 CSV
- java - 如何在一个类中“定义”另外两个类,以便我可以使用它们的方法
- python - ValueError:对于 2D nparray 矩阵,x 和 y 的大小必须相同