javascript - 如何在反应选择上进行循环?
问题描述
我按照此安装和使用示例代码使用 react-select 进行选择选项。
有一个数组对象来存储这样的选项:
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
现在,我想让它动态地存储来自其他数据的值并让它在对象上迭代。
像这样:
const options = [
{ value: flavor, label: flavor },
];
值和标签的味道是一个数组。假设数组是这样存储数据的:
flavor = ['chocolate', 'strawberry', 'vanilla']
因此,每当数组添加新值时,上面的数组对象也会在迭代时添加值。
那么,如何在其中进行迭代..?
还是我应该考虑在组件中弄清楚..?
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
编辑:我想要的结果是根据数组值添加数组内的对象,假设我们在数组中有一个数据,那么const options
存储数据如下:
const options = [
{ value: flavor, label: flavor },
];
那么如果数组存储 2 个数据,则const options
如下所示:
const options = [
{ value: flavor, label: flavor },
{ value: flavor, label: flavor },
];
这样做的目的是使选择上的下拉选项具有动态值。
解决方案
您可以使用.map
函数来动态创建您的选项:)
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
const options = [
{ value: 'flavor', label: 'flavor' },
{ value: 'yummy', label: 'yummy' },
{ value: 'red', label: 'red' },
{ value: 'green', label: 'green' },
{ value: 'yellow', label: 'yellow' },
];
class App extends Component {
state = {
selectedOption: 'None',
}
handleChange = ({ target }) => {
this.setState({
selectedOption: target.value,
});
}
render = () => (
<div>
<span>{this.state.selectedOption}</span>
<select
value={this.state.selectedOption}
onChange={this.handleChange}
>
{options.map(({ value, label }, index) => <option value={value} >{label}</option>)}
</select>
</div>
);
}
render(<App />, document.getElementById('root'));
推荐阅读
- html - 使用css webkit动画时,表格边框不会出现在后面的元素上
- javascript - 无法从温度数组中获取最小值。可能是什么问题?
- android - 应用内购买获取空白 Sku 详细信息列表
- node.js - 当任何后端依赖服务变得潜在时,Nodejs 服务器变得潜在
- javascript - 如何根据在 JavaScript 中单击的单选按钮禁用文本框?
- python - 转换为日期时间时,为什么使用 pandas 解析错误的年份和月份?
- oracle - 在创建表时使用 listagg (colname,',') 会引发错误 ORA-01489: 字符串连接的结果太长
- python - 电话号码检查的正则表达式不起作用
- java - 使用 Seekbar 调整字体大小,但文本在同一字符串中
- javascript - 使用 React Flux 模式将值从文本框保存到后端