reactjs - 是否可以在 React 选择中使用 Array 作为选项
问题描述
我的输入数据是数组格式,例如 ["A","B","C"],我想将它们显示为 react-select 中的选项。
import React, { Component } from 'react';
import Select from 'react-select';
const test= ["a","b","c"]
class TestSelect extends React.Component {
state = {
multi: null,
};
handleChange = name => value => {
this.setState({
[name]: value,
});
};
render() {
return (
<div className='dropdown' style={{ dispay: 'inline-block', width: 250, paddingLeft: 50, paddingTop: 50 }}>
<Select
options={test}
value={this.state.multi}
autosize={true}
onChange={this.handleChange('multi')
isMulti
placeholder="Select Values"
/>
</div >
);
}
}
export default TestSelect;
是否可以使用数组作为选项,或者它总是应该是一个对象?
解决方案
根据文档,选项的结构必须遵守以下模式
[{label: 'your label', value: 'your value'}, ...]
您将需要像这样转换您的数组:
const options = test.map(v => ({
label: v,
value: v
}));
然后将此值作为您的选项传递。
这是您的代码的实时示例。
推荐阅读
- javascript - TypeError:无法读取未定义的属性“地图”| 不和谐.js
- java - Mockito:想要但没有被调用
- javascript - 如何检查是否
在一个值之后有一个值 已被选中? - asp.net-mvc - NET Core 3.1 MVC 授权/身份验证,使用在单独的 Net Core 3.1 Web Api 中从外部获取的令牌 (JWT)
- javascript - js中RegEx中的匹配模式
- regex - 如何将 UNIX 中的这个正则表达式与 expr 匹配?
- autohotkey - 如何在退出时单击左键?
- python - 在 soup.find_all() 中传递变量
- r - 子集观察数
- python - 如何解决 Django IntegrityError NOT NULL 约束字段?