Question

我需要一些帮助，我想将数据填充到Dropdown中，我使用的是材料-ui，但我不知道该怎么做，我真的很新，我知道我可以使用道具然后将它们传递到下拉列表但对我来说并不是那么清楚。

这是我的代码：

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';



export default class CreateLinksave extends React.Component {

 constructor(props) {
   super(props);
   this.state = {value: 1
   };
   this.handleChange=this.handleChange.bind(this);
 }
 handleChange(event, index, value) {this.setState({value});}

render() {
 return (
    <div className="container">
     <div>
       <RaisedButton label="Copy an existing Global Multisave"/>
     </div>
      <div>
      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
        <MenuItem value={1} primaryText="Never" />
        <MenuItem value={2} primaryText="Every Night" />
        <MenuItem value={3} primaryText="Weeknights" />
      </DropDownMenu>
      </div>
     </div>
  );
 }
}

正如你所看到的，我在下拉列表中有一些选项＆＃34;硬编码＆＃34;但是我想让它变得动态，所以如果有更多选项添加到道具中，那么这会自动填充它们。

有人可以帮我解决这个问题吗。

问候。

Answer 1

假设您可以将这些道具作为数组发送：

items = [
  { value: 1, primaryText: 'Never' },
  { value: 2, primaryText: 'Every Night' },
  { value: 3, primaryText: 'Weeknights' },
]

只需通过它们进行映射，您就会得到相同的结果：

render() {
  return (
    <div>
      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
        {this.props.items.map(item =>
          <MenuItem key={item.value} {...item} />
        )}
      </DropDownMenu>
    </div>
  )
}

将数据填充到材料-ui下拉列表React JS

1 个答案: