ReactJS: Wie man Material-UIs <MenuItem/> innerhalb <DropDownMenu /> dynamisch darstellt?

Question

Mit ReactJS + Material-UI habe ich ein Array namens colors und enthält Strings in verschiedenen Farben. Sagen Sie zum Beispiel das Array colors hat 3 Farb-Strings: "weiß", "blau", "grün. Dann möchte ich jede Farbe String hat eine <MenuItem/> innerhalb einer <DropDownMenu/> (http://www.material-ui.com/#/components/dropdown-menu). Und sobald ein <MenuItem/> ausgewählt ist, ich ' Ich mag es, diese bestimmte Farbe zu loggen, sagen wir "weiß": console.log ("weiß").

Also habe ich .forEach verwendet noch die zeigt keine Zeichenfolgen und es ist leer. Was könnte ich sein Unrechttuns

Hier ist der Code:

constructor() { 
    super() 

    this.state = { 
     value: 1, 
    } 
    } 

    dropDownColorChange(event, index, value) { 
    this.setState({value: value}) 
    //Not sure how to implement here dynamically based on array size. Would like to console.log the color string of the selected 
    } 

    render() { 
    var colors = ["white", "blue", "green"] //would be able to handle any array size 


    return (
      <div> 
       <DropDownMenu 
       value={this.state.valueTwo} 
       onChange={this.dropDownColorChange} 
       > 
       { 
        <MenuItem value={1} primaryText="Select" /> 
        colors.forEach(color => { 
        <MenuItem primaryText={color}/> 
        }) 
       } 
       </DropDownMenu> 
      </div> 
    ) 
    } 

Danke

Answer 1

Sie haben fast alles richtig gemacht. Sie müssen map über verfügbare Farben und ein MenuItem für jede Farbe zurück:

const colors = ['white', 'blue', 'green']; 

class ColorChanger extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     selectedColorValue: 1, 
    }; 
    } 

    handleColorChange(event, index, value) { 
    console.log(`You have selected ${colors[value]} color`); 

    this.setState({ 
     selectedColorValue: value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <DropDownMenu value={this.state.selectedColorValue} onChange={this.handleColorChange}> 
      {colors.map((color, index) => 
      <MenuItem key={index} value={index} primaryText={color} /> 
     )} 
     </DropDownMenu> 
     </div> 
    ); 
    } 
} 

map (im Gegensatz zu forEach) gibt einen Array, wobei jedes Element den Rückgabewert von Prädikatfunktion ist. In Ihrem Fall gibt es einen <MenuItem /> zurück.