javascript - React-选择多选
问题描述
我是新来的反应。我正在使用 react -select 并且只是显示用户通过 map 函数输入的值。
这是代码:
const Departments = [
{ label: "OneIT", value: "OneIT" },
{ label: "HR", value: "HR" },
{ label: "Vigilance", value: "Vigilance" },
{ label: "Ethics", value: "Ethics" },
{ label: "Corporate Services", value: "Corporate Services" },
{ label: "Legal", value: "Legal" },
{ label: "Sports", value: "Sports" },
{ label: "TQM", value: "TQM" },
{ label: "Iron Making", value: "Iron Making" },
{ label: "TMH", value: "TMH" }
];
class MultiSelect2 extends Component {
state = {
selectedOptions: []
};
handleChangeField = selectedOptions => {
this.setState({ selectedOptions });
};
render() {
const { selectedOption } = this.state;
return (
<div className="container">
<div className="row">
<div className="col-md-2"></div>
<div className="col-md-8">
<span>Select Department</span>
<Select
value={selectedOption}
options={Departments}
onChange={this.handleChangeField}
isMulti
/>
{this.state.selectedOptions.map(o => (
<p>{o.value}</p>
))}
</div>
<div className="col-md-4"></div>
</div>
</div>
);
}
}
如您所见,我使用地图功能只是为了在屏幕上显示元素。我想做的是使用它来存储数组中的元素,以将所有值传递到后端或在另一个类中显示。我怎样才能做到这一点?
解决方案
推荐阅读
- ios - 如何分配 -> 发送 -> 接收 -> 转换 -> 将 UnsafeRawPointer 从扩展程序释放到应用程序?
- python - 有没有办法知道 QGridLayout 中元素的 X 和 Y 坐标?
- node.js - 单个 React 元素子错误 - 在根组件中包装语句?
- javascript - 条纹一次性付款,为什么代码不起作用
- vue.js - 全局导入手写笔在 vuejs 中一次
- c++ - 在临时对象上调用方法
- excel - 根据列中的条件在组之间插入一行
- java - NullPointerException:尝试使用 jdbcTemplete 时为 null
- python - 如何从位于不同模块的两个类中选择一个
- sql - 像骨架屏幕一样延迟加载数据。可能吗?