Changing the value of an element onclick in ReactJS

问题

I have a Material UI submenu being populated from a json. The Main menu item holding this submenu array will be changed according to what is being selected. See image below

The Main menu item holding the submenus looks like this

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

The nested menus are coming from here

    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>

And ultimately, the data is stored in a json like this

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 my poor understanding of React, I created an initial value for the slected language in the the constructor state

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

and a function that will handle the changing (this is my problem area, I'm sure)

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

I need to build this onChange() function correctly to alter the state based on the submenu clicked. This will give me the groundwork to build other properties that will trigger a translate feature on click as well

Any help will be appreciated. Thanks

回答1:

The action needs a parameter - the new language:

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

and you need to pass it from 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}/>
         }
    />
))}

I am not sure if you want to store language in your state or just the name. Both ways have their uses.

回答2:

Something like this

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>

来源：https://stackoverflow.com/questions/44090322/changing-the-value-of-an-element-onclick-in-reactjs

标签

reactjs

material-ui