javascript - 使用多下拉菜单时获取反应选择选择的选项
问题描述
我的页面上有两个可用的 react-select下拉菜单,一个允许用户选择 A 或 B,另一个允许他们从“蓝色、黄色、红色”中选择多个项目。
当他们选择了这些项目时,我想使用它们。现在我只想检查已选择的值,所以我只是将它们打印到屏幕上。对于单一选择下拉列表,我已成功使用来自 github 的示例代码。如下:
import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'a', label: 'a' },
{ value: 'b', label: 'b' },
];
class App extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
document.write(`Option selected:`, selectedOption.value); //this prints the selected option
}
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
//isMulti //added when the user can pick more than one
/>
);
}
}
我的问题是我如何成功地为多选项做到这一点?用户可以根据需要选择任意数量,但在打印已选择的选项时会引发“未定义”错误。我认为这是因为该选项存储在一个数组中,但我不确定。
谢谢大家。
解决方案
您需要更改handleChange
来处理isMulti
. 这是一个例子:
import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from 'react-select';
const options = [
{ value: 'a', label: 'a' },
{ value: 'b', label: 'b' },
];
class App extends React.Component {
state = {
selectedOptions: [],
}
handleChange = (selectedOptions) => {
this.setState({ selectedOptions });
}
render() {
const { selectedOptions } = this.state;
return (
<React.Fragment>
<Select
isMulti
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
{selectedOptions.map(o => <p>{o.value}</p>)}
</React.Fragment>
);
}
}
render(<App />, document.getElementById('root'));
推荐阅读
- javascript - 函数式组合比多次迭代慢
- java - 春季集成抛出 NoSuchFileException
- cassandra - cassandra gc 宽限期无法配置
- c# - 连接到系统的设备无法运行
- cucumber - Cabbage 中的隔离场景
- excel - 在 Workbook_Activate() 上使用 Excel 2016 更新 SQL Server 时出现问题
- git - Git:从上游同步标签
- java - 更改 navigationView 的单个特定菜单项的背景颜色
- ansible - Ansible 最佳实践 - 如何使用文件目录中的角色/文件?
- javascript - Puppeteer 获得 3rd-party cookie