Ändern des Wertes eines Elements onclick in ReactJS

Question

Ich habe ein Material UI Untermenü von einem Json aufgefüllt. Der Hauptmenüpunkt, der dieses Untermenü enthält, wird entsprechend der Auswahl geändert. Siehe Bild unten

Der Hauptmenüpunkt hält die Untermenüs dieser sieht aus wie

<MenuItem 
     primaryText={this.state.selectedLanguage.name} 
     rightIcon={<ArrowDropRight />} 
     style={{userMenuItem}} 
     leftIcon={ 
      <img className="flag" src={this.state.selectedLanguage.icon}/> 
     } 
     menuItems={languageMenu} //see below 
    /> 

Die verschachtelten Menüs kommen von hier

const languageMenu = 
     <div> 
      {languages.map((item, index) => (
       <MenuItem 
        key={index} 
        onClick={this.onLanguageChange} 
        primaryText={languages[index].name} 
        style={{userMenuItem}} 
        leftIcon={ 
         <img className="flag" src={languages[index].icon}/> 
        }/> 
      ))} 
     </div> 

Und schließlich werden die Daten gespeichert in einem JSON wie diesem

const languages = [ 
    { 
     name: 'English', 
     icon: './assets/images/flags/uk.png', 
     link: '' 
    }, 
    { 
     name: 'Español', 
     icon: './assets/images/flags/Spain.png', 
     link: '' 
    }, 
    { 
     name: 'Français', 
     icon: './assets/images/flags/France.png', 
     link: '' 
    } 
... 
]; 

In meinem armen Verständnis von Reaktion, ich einen Anfangswert für die slected Sprache im Zustand des Konstruktor erstellt

constructor(props) { 
    super(props); 
    this.state = {   
     selectedLanguage:{ 
      name:"English", 
      icon:"./assets/images/flags/uk.png", 
     }, 
    } 
} 

und eine Funktion, die den Wechsel behandelt (das ist mein Problem Bereich, ich bin sicher,

)

onLanguageChange =() => this.setState(
    { 
     selectedLanguage: this.state.selectedLanguage.name, 
    } 
); 

ich brauche diese onChange() Funktion bauen korrekt den Zustand im Untermenü basierend zu ändern geklickt. Dies gibt mir die Grundlage, um andere Eigenschaften zu bauen, die ein Übersetzungsfeature auf Klicken auch auslösen werden

Irgendwelche Hilfe wird geschätzt. Dank

Answer 1

Die Aktion muss einen Parameter - die neue Sprache:

onLanguageChange = languageName => this.setState({ 
    selectedLanguage: languageName 
}); 

und Sie müssen es, um von onClick:

{languages.map((language, index) => (
    <MenuItem 
     key={index} 
     onClick={() => this.onLanguageChange(language.name)} 
     primaryText={language.name} 
     style={{userMenuItem}} 
     leftIcon={ 
      <img className="flag" src={language.icon}/> 
     } 
    /> 
))} 

Ich bin nicht sicher, ob Sie language in Ihrem speichern möchten Staat oder nur die name. Beide Wege haben ihre Verwendung.

Answer 2

So etwas wie dieser

const languages = [...] 


constructor(props) { 
    super(props); 
    this.state = {   
     selectedLanguage: 0 
    } 
} 

onLanguageChange = (index) => this.setState({ selectedLanguage: index }); 

const mainMenu =  
    <MenuItem 
      primaryText={languages[this.state.selectedLanguage].name} 
      rightIcon={<ArrowDropRight />} 
      style={{userMenuItem}} 
      leftIcon={ 
       <img className="flag" src={languages[this.state.selectedLanguage].icon}/> 
      } 
      menuItems={languageMenu} //see below 
    /> 

const languageMenu = 
    <div> 
     {languages.map((item, index) => (
      <MenuItem 
       key={index} 
       onClick={this.onLanguageChange(index)} 
       primaryText={languages[index].name} 
       style={{userMenuItem}} 
       leftIcon={ 
        <img className="flag" src={languages[index].icon}/> 
       }/> 
     ))} 
    </div>