使用 ReactJS + Material-UI,我有一个名为 colors
的数组并包含不同颜色的字符串。例如数组 colors
有 3 个颜色字符串:“白色”、“蓝色”、“绿色”。然后我想渲染每个颜色字符串在 <MenuItem/>
(http://www.material-ui.com/#/components/dropdown-menu)中有一个 <DropDownMenu/>
。一旦选择了 <MenuItem/>
,我想控制台记录特定颜色,例如选择“白色”:console.log("white")。
所以我使用了 .forEach 但它没有显示任何字符串而且它是空的。我做错了什么?
代码如下:
constructor() {
super()
this.state = {
value: 1,
}
}
dropDownColorChange(event, index, value) {
this.setState({value: value})
//Not sure how to implement here dynamically based on array size. Would like to console.log the color string of the selected
}
render() {
var colors = ["white", "blue", "green"] //would be able to handle any array size
return (
<div>
<DropDownMenu
value={this.state.valueTwo}
onChange={this.dropDownColorChange}
>
{
<MenuItem value={1} primaryText="Select" />
colors.forEach(color => {
<MenuItem primaryText={color}/>
})
}
</DropDownMenu>
</div>
)
}
谢谢
最佳答案
你几乎做对了。你必须 map
超过可用颜色并返回 MenuItem
对于每种颜色:
const colors = ['white', 'blue', 'green'];
class ColorChanger extends Component {
constructor() {
super();
this.state = {
selectedColorValue: 1,
};
}
handleColorChange(event, index, value) {
console.log(`You have selected ${colors[value]} color`);
this.setState({
selectedColorValue: value
});
}
render() {
return (
<div>
<DropDownMenu value={this.state.selectedColorValue} onChange={this.handleColorChange}>
{colors.map((color, index) =>
<MenuItem key={index} value={index} primaryText={color} />
)}
</DropDownMenu>
</div>
);
}
}
map
(与 forEach
相反)返回一个数组,其中每个元素都是谓词函数的返回值。在您的情况下,它返回 <MenuItem />
.
关于javascript - ReactJS:如何在 <DropDownMenu/> 中动态呈现 Material-UI 的 <MenuItem/>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39884030/