素材-UI DropDownMenuを返すために取得する方法選択

Question

これはStackOverflowの上で私の初めての投稿です - 私が反応アプリを構築し、使用するために私を必要とし、私のユーザーから情報を収集しています

私と一緒にクマMaterial-UIを使用したDropDownMenuです。ユーザーが選択したオプションの文字列値を記録し、それを状態に設定するためのドロップダウンメニューを希望します。コードが書かれる方法では、整数値「状態」を状態にプッシュするだけで、ユーザが選択する文字列値には関係しません。私は数値を目的の文字列値に相関させる関数を書くことで遊んできましたが、正しく情報を返すわけではありません。私は同じオプションを選択することができ、毎回異なる文字列値と異なる数値を記録します。

「Poverty Alleviation」や「Education」など、ユーザーが（stateのdisplayValueプロパティによって）選択するものをプッシュすることを意図していますが、正しい文字列を返すことはありません。

ここに私のコードです。どんな提案も感謝しています。あなたが見る必要がある他のコードが見つからない場合は教えてください。

class Sandbox extends React.Component { 
constructor(props){ 
    super(props) 
     this.state = { 
      loading: false, 
      finished: false, 
      stepIndex: 0, 
      value: 1, 
      ddvalue: 0, 
      displayValue: "" 
     }; 

    } 

    handleChange = (event, index, value) => { 
     console.log(value) 

if(value === 0){ 
    var test0 = "Event Staffing"; 
    this.setState({displayValue: test0}); 

} else if (value === 1){ 
    var test1 = "Environmental"; 
    this.setState({displayValue: test1}); 

} else if (value === 2){ 
    var test2 = "Parks and Recreation"; 
    this.setState({displayValue: test2}); 

} else if (value === 3){ 
    var test3 = "Arts and Crafts"; 
    this.setState({displayValue: test3}); 

} else if (value === 4){ 
    var test4 = "Infrastructure"; 
    this.setState({displayValue: test4}); 

} else if (value === 5){ 
    var test5 = "Household Tasks"; 
    this.setState({displayValue: test5}); 

} else if (value === 6){ 
    var test6 = "Education"; 
    this.setState({displayValue: test6}); 

} else if (value === 7){ 
    var test7 = "Animals"; 
    this.setState({displayValue: test7}); 

} else if (value === 8) { 
    var test8 = "Disaster Relief"; 
    this.setState({displayValue: test8}); 

} else if (value === 9){ 
    var test9 = "Poverty Alleviation"; 
    this.setState({displayValue: test9}); 

} 


console.log(this.state.displayValue) 
    } 

    case 3: 
    return (
     <div> 
     <div> 
       <TextField hintText="Image URL" /> 
       <br /> 
       <TextField hintText="Any Additional Perks?" /> 
       <br /> 
       <DropDownMenu 
        value={this.state.ddvalue} 
        onChange={this.handleChange} 
        style={styles.customWidth} 
        autoWidth={false} 
        > 
        <MenuItem value={1} primaryText="Event Staffing" /> 
        <MenuItem value={2} primaryText="Environmental" /> 
        <MenuItem value={3} primaryText="Parks and Recreation" /> 
        <MenuItem value={4} primaryText="Arts and Crafts" /> 
        <MenuItem value={5} primaryText="Infrastructure" /> 
        <MenuItem value={6} primaryText="Household Tasks" /> 
        <MenuItem value={7} primaryText="Education" /> 
        <MenuItem value={8} primaryText="Animals" /> 
        <MenuItem value={9} primaryText="Disaster Relief" /> 
        <MenuItem value={10} primaryText="Poverty Alleviation" /> 
        </DropDownMenu> 
    </div> 

Answer 1

「値」フィールドには型の要件はありません。文字列を値として入れる場合は、簡単に行うことができます。

<MenuItem value="Event Staffing" primaryText="Event Staffing" /> 

また、setState関数は非同期であることに注意してください。 setStateの後の状態のconsole.logは、変更された値を表示するとは限りません。ここで

Answer 2

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

 
const styles = { 
 
    customWidth: { 
 
     width: 200, 
 
    }, 
 
}; 
 

 
class Sandbox extends React.Component { 
 
    constructor(props){ 
 
     super(props) 
 
     this.state = { 
 
      loading: false, 
 
      finished: false, 
 
      stepIndex: 0, 
 
      value: 1, 
 
      ddvalue: 0, 
 
      displayValue: "" 
 
     }; 
 

 
    } 
 

 
    handleChange = (event, index, value) => { 
 
     console.log(value); 
 
     this.setState({displayValue: value}); 
 
     console.log(this.state.displayValue); 
 
    }; 
 

 
    render(){ 
 
     return (
 
      <div> 
 
       <div> 
 
        <TextField hintText="Image URL" /> 
 
        <br /> 
 
        <TextField hintText="Any Additional Perks?" /> 
 
        <br /> 
 
        <DropDownMenu 
 
         value={this.state.displayValue} 
 
         onChange={this.handleChange} 
 
         style={styles.customWidth} 
 
         autoWidth={false} 
 
        > 
 
         <MenuItem value="Event Staffing" primaryText="Event Staffing" /> 
 
         <MenuItem value="Environmental" primaryText="Environmental" /> 
 
         <MenuItem value="Parks and Recreation" primaryText="Parks and Recreation" /> 
 
         <MenuItem value="Arts and Crafts" primaryText="Arts and Crafts" /> 
 
         <MenuItem value="Infrastructure" primaryText="Infrastructure" /> 
 
         <MenuItem value="Household Tasks" primaryText="Household Tasks" /> 
 
         <MenuItem value="Education" primaryText="Education" /> 
 
         <MenuItem value="Animals" primaryText="Animals" /> 
 
         <MenuItem value="Disaster Relief" primaryText="Disaster Relief" /> 
 
         <MenuItem value="Poverty Alleviation" primaryText="Poverty Alleviation" /> 
 
        </DropDownMenu> 
 
       </div> 
 
      </div>)} 
 
    } 
 

 
export default Sandbox;

これはあなたがコード