在 ReactJS 中更改元素 onclick 的值

Question

我有一个 Material UI 子菜单是从 json 填充的。包含此子菜单数组的主菜单项将根据所选择的内容进行更改。见下图

包含子菜单的主菜单项如下所示

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

嵌套菜单来自这里

    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>

最终，数据存储在这样的json中

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: ''
    }
 ...
];

由于对React的理解不足，我在构造函数状态下为选择的语言创建了一个初始值

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

和一个处理变化的函数（这是我的问题领域，我敢肯定）

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

我需要正确构建此 onChange() 函数以根据单击的子菜单更改状态。这将为我构建其他属性奠定基础，这些属性也会在点击时触发翻译功能

如有任何帮助，我们将不胜感激。谢谢

Answer 1

该动作需要一个参数 - 新语言：

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

并且您需要从 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}/>
         }
    />
))}

我不确定您是想在您所在的州存储 language 还是只存储 name。两种方式各有用途。

Answer 2

像这样

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>

在 ReactJS 中更改元素 onclick 的值

Changing the value of an element onclick in ReactJS

reactjs

material-ui