在 ReactJS 中更改元素 onclick 的值

Question

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

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

    <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>