材料 UI 应用栏单击在“反应”中不起作用

Question

我正在尝试一些反应。我正在将应用栏和抽屉从 v0 材质 UI 呈现为功能组件。我已经在类中添加了句柄DrawerClick函数，并将该函数作为道具发送，以用作功能组件中的单击函数。但是点击功能不起作用。这里的问题是将函数包装为参数，并将其作为道具传递可能不起作用。如果有任何其他方法可以实现点击，任何帮助将不胜感激，但我们需要确保我们在功能组件中使用花哨的组件，并在类中呈现这些组件，就像演示中所示一样。在左旋图标按钮上单击，抽屉的打开和关闭需要得到控制。我在这里通过堆栈闪电战=>工作演示添加了一个工作演示这是我的代码：import React, { Component } from 'react';import { render } from 'react-dom';import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';import getMuiTheme from 'material-ui/styles/getMuiTheme';import AppBar from 'material-ui/AppBar';import Drawer from 'material-ui/Drawer';import MenuItem from 'material-ui/MenuItem';import './style.css';export const getMenuBar = (isBarOpened) => {  return(    <Drawer open={isBarOpened}>      <MenuItem>Menu Item</MenuItem>      <MenuItem>Menu Item 2</MenuItem>    </Drawer>  );}export const getAppBar = (handleDrawerClick) => {  return(    <AppBar       title="My AppBar"       className="st_appBarClass"       titleStyle={{ color: "#FFFFFF" }}      onLeftIconButtonClick={handleDrawerClick()}    />  );}class App extends Component {  constructor() {    super();    this.state = {      name: 'React',      isMenuOpened: false    };  }  handleDrawerClick = (e) => {    console.log(e);    if(e) {      this.setState({ isMenuOpened: !this.state.isMenuOpened });    }  }  render() {    return (      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>        <div className='product-list-wrapper'>          {/*<ProductList products={products} />*/}          {getAppBar(this.handleDrawerClick)}          {getMenuBar(this.state.isMenuOpened)}        </div>      </MuiThemeProvider>    )  }}render(<App />, document.getElementById('root'));

Answer 1

export const getAppBar = (handleDrawerClick) => {

  return(

    <AppBar 

      title="My AppBar" 

      className="st_appBarClass" 

      titleStyle={{ color: "#FFFFFF" }}

      onLeftIconButtonClick={handleDrawerClick} //Remove ()

    />

  );

}

Answer 2

打开菜单要删除不必要的圆括号

<AppBar 

      title="My AppBar" 

      className="st_appBarClass" 

      titleStyle={{ color: "#FFFFFF" }}

      onLeftIconButtonClick={handleDrawerClick}//<---here

    />

要关闭菜单，请提供一个 onClick 到父 div

<div onClick={this.handleDrawerClick} className='product-list-wrapper'> //<----here

          {/*<ProductList products={products} />*/}

          {getAppBar(this.handleDrawerClick)}

          {getMenuBar(this.state.isMenuOpened)}

        </div>