作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在这个 Installation and usage 之后使用 react-select 创建了一个选择选项示例代码。
有一个数组对象来存储这样的选项:
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
现在,我想让它动态地存储来自其他数据的值,并让它在对象上迭代。
像这样:
const options = [
{ value: flavor, label: flavor },
];
值和标签上的flavor是一个数组。假设数组是这样存储数据的:
flavor = ['chocolate', 'strawberry', 'vanilla']
因此,每当数组添加新值时,上面数组的对象也会在迭代中添加值。
那么,如何在其中进行迭代......?
或者我应该考虑在组件中找出……?
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
编辑:我想要的结果是根据数组值添加数组中的对象,假设我们在数组中有一个数据,那么 const 选项
像这样存储数据:
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'));
关于javascript - 如何在 react 选择上进行循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55642605/
我是一名优秀的程序员,十分优秀!