Material-ui根据选择的值选择字段和渲染列表

Question

我有一个 Material-ui SelectField 填充有 MenuItems。我的用例是我希望能够从 SelectField 中选择一个值，然后将其显示在字段下方生成的列表中。

我将如何着手开始这样做，以实现我想要的结果？

任何帮助将不胜感激

感谢您的宝贵时间

Answer 1

因此，据我了解，您只想将所选项目添加到列表中并使用 List 和 ListItem 显示项目。

考虑：
options - 您的项目列表（显示在选择字段中的项目）
onChangeSelectField - SelectField onChange 回调

//You could store the item`s ids inside an array. Ex:
onChangeSelectField(event, index, value) {
  this.setState({
    selectedItem: value,
    selectedItems: this.state.selectedItems.concat(value) 
  })
}

//And inside the render function
render() {
  <List>
    {this.state.selectedItems.map((itemID) => {
      var item = this.state.options.find(x => x.id === itemID)

      return (
        <ListItem primaryText={item.text} />
      )
    })}
  </List>
} 

Answer 2

我在我的项目中做了相同的概念，但用于不同的目的

在我的项目中，有一个带有下拉元素的卡片元素。在卡片媒体中，我使用了random image loader([lorempixel.com][1])，因此我正在更改链接http://lorempixel.com/500/400/[category]（例如：http://lorempixel.com/500/400/nature）中的随机图像类别，因此它会更新链接并在下拉列表更改时显示不同的类别图像。

以下是我如何在下拉列表更改时更新链接

onChange事件正在调用handleChange函数

onChange={this.handleChange}

在handleChange函数中，我正在更新状态

this.setState({
  text: event.nativeEvent.target.innerText,
  value: value
});

这里，我正在更新状态

<img src={"http://lorempixel.com/500/400/"+this.state.text} />

这是我写的代码，希望对你有帮助。如果你想要什么，请告诉我

import React from "react";

import Card from "material-ui/Card";
import CardActions from "material-ui/Card/CardActions";
import CardTitle from "material-ui/Card/CardTitle";
import CardHeader from "material-ui/Card/CardHeader";
import CardMedia from "material-ui/Card/CardMedia";
import CardText from "material-ui/Card/CardText";

import Drawer from "material-ui/Drawer";
import DropDownMenu from "material-ui/DropDownMenu";
import IconMenu from "material-ui/IconMenu";
import IconButton from "material-ui/IconButton";
import Menu from "material-ui/Menu";
import MenuItem from "material-ui/MenuItem";

import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";

const styles = {
  margin: {
    margin: "20px 300px"
  },
  float: {
    float: "right"
  },
};

class About extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      text: "nature",
      value: 3
    };
  }

  handleChange(event, index, value){
    this.setState({
      text: event.nativeEvent.target.innerText,
      value: value
    });
  }

  render(){
    const IconMenuRight = (
      <DropDownMenu
        style={styles.float}
        value={this.state.value}
        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
        onChange={this.handleChange}>
          <MenuItem value={1}>sports</MenuItem>
          <MenuItem value={2} primaryText="city" />
          <MenuItem value={3} primaryText="nature" />
          <MenuItem value={4} primaryText="animals" />
          <MenuItem value={5} primaryText="abstract" />
          <MenuItem value={6} primaryText="cats" />
          <MenuItem value={7} primaryText="food" />
          <MenuItem value={8} primaryText="nightlife" />
          <MenuItem value={9} primaryText="people" />
          <MenuItem value={10} primaryText="technics" />
          <MenuItem value={11} primaryText="transport" />
      </DropDownMenu>
    )
    return(
      <Card style={styles.margin}>
        <CardHeader
          avatar="http://lorempixel.com/400/200/people"
          title="http://lorempixel.com/"
          subtitle="A random image loader. Change the drop down value to see the diffent category image.">
          {IconMenuRight}
        </CardHeader>
        <CardMedia>
          <img src={"http://lorempixel.com/500/400/"+this.state.text} />
        </CardMedia>
        <CardTitle
          title={"React js"}
          subtitle="React is the entry point to the React library. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it."/>
        <CardText>
          Webdesign or Print. Its simple and absolutely free! Just put the custom url in your code like this:
          to get your FPO / dummy image.
        </CardText>
      </Card>
    )
  }
}

export default About;