Material-ui select 字段和渲染列表基于 selected 值

Question

我有一个 material-ui SelectField 填充了 MenuItem。我的用例是我希望能够 select 来自 SelectField 的值之一，然后将其显示在字段下方生成的列表中。

我将如何开始这样做才能达到我想要的结果？

如有任何帮助，我们将不胜感激

感谢您的宝贵时间

Answer 1

因此，根据我的理解，您只想在列表中添加 selected 项目并使用 List 和 ListItem.

显示项目

考虑：
选项 - 您的项目列表（select 字段中显示的项目）
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]) 所以我改变了 link http://lorempixel.com/500/400/[category] 中的随机图像类别（例如：http://lorempixel.com/500/400/nature）所以它会更新 link 并显示下拉列表更改时的不同类别图像。

下面是我如何根据下拉菜单的变化更新 link

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;

Material-ui select 字段和渲染列表基于 selected 值

Material-ui select fields and rendering lists based on the selected values

reactjs

material-ui