Material-ui選択した値に基づいてフィールドとレンダリングリストを選択します

Question

MenuItemが入力された材料-ui SelectFieldがあります。私の使用例は、SelectFieldから値の1つを選択して、フィールドの下に生成されるリストに表示させたいということです。

希望の結果を得るために、これをやり始めたらどうしますか？

すべてのヘルプはあなただけListとListItemを使用して、リスト、表示項目内の選択した項目を追加したい私の理解から、だからあなたの時間

Answer 1

ため

おかげでいただければ幸いです。

を考えてみましょう：
オプションを - アイテムのリスト（選択フィールドに表示されたもの）
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;