javascript - 从子组件 reactjs 运行函数

Question

Layout.js 文件是一个 hoc 类似这样的东西:

import React, { Component } from 'react';
import { I18n } from 'react-i18next';

class Layout extends Component {
.
.
.
render() {
  return (
    <I18n ns="translations">
      {(t, { i18n }) => (
        <Aux>
          <Toolbar
            blablabla
          />
          <SideDrawer
            blablabla
          />
          <main className={classes.Content}>{this.props.children}
          </main>
        </Aux>
       )}
     </I18n>
    );
  }
}

export default Layout;

Toolbar.js 是一个像这样的无状态组件:

import React from 'react';
import NavigationItems from '../NavigationItems/NavigationItems';
.
.
const toolbar = props => {
  <nav className={classes.DesktopOnly}>
    <NavigationItems isAuthenticated={props.isAuth} />
  </nav>
}
export default toolbar;

NavigationItems.js 是这样的:

import React from 'react';
import NavigationItemMenu from './NavigationItemMenu/NavigationItemMenu';
import i18n from '../../../i18n';

const navigationItems = props => (
 <ul className={classes.NavigationItems}>
    <NavigationItemMenu>
      {i18n.t('Navigation.NavigationItems.NavigationItems.languaje')}
    </NavigationItemMenu>
 </ul>
);
export default navigationItems;

最终 NavigationItemMenu.js 是这样的:

import React, { Component } from 'react';
import i18n from '../../../../i18n';
.
.
class NavigationItemMenu extends Component {
 .
 .
 .
 render() {
   return (
     <MenuList role="menu">
       <MenuItem onClick={this.handleClose('en')}>    
         {i18n.t('Navigation.NavigationItems.NavigationItems.en')}
       </MenuItem>
     </MenuList>
   )
  }
}
export default NavigationItemMenu;

问题是:如果我运行这段代码:

<button onClick={() => i18n.changeLanguage('en')}>en</button>

在 layout.js 中工作就像一个魅力。您可以查看此链接中的示例:

https://github.com/i18next/react-i18next/blob/master/example/react_renderProps/src/App.js

但是，如果我尝试在最后一个文件 NavigationItemMenu.js 中运行此代码，则如下所示:

<MenuItem
  onClick={(this.handleClose, () => i18n.changeLanguage('en'))           
  {i18n.t('Navigation.NavigationItems.NavigationItems.en')}
</MenuItem>

它不起作用。 langiaje没变，哪里出错了？

钯。抱歉，我是 React 新手!

非常感谢!

Answer 1

onClick 语法看起来很奇怪。

尝试

<MenuItem
  onClick={() => {
      this.handleClose();
      i18n.changeLanguage('en')
  }}           
/>
  {i18n.t('Navigation.NavigationItems.NavigationItems.en')}
</MenuItem>