材料 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) => {&nbsp; return(&nbsp; &nbsp; <AppBar&nbsp;&nbsp; &nbsp; &nbsp; title="My AppBar"&nbsp;&nbsp; &nbsp; &nbsp; className="st_appBarClass"&nbsp;&nbsp; &nbsp; &nbsp; titleStyle={{ color: "#FFFFFF" }}&nbsp; &nbsp; &nbsp; onLeftIconButtonClick={handleDrawerClick} //Remove ()&nbsp; &nbsp; />&nbsp; );}

Answer 2

打开菜单要删除不必要的圆括号<AppBar&nbsp;&nbsp; &nbsp; &nbsp; title="My AppBar"&nbsp;&nbsp; &nbsp; &nbsp; className="st_appBarClass"&nbsp;&nbsp; &nbsp; &nbsp; titleStyle={{ color: "#FFFFFF" }}&nbsp; &nbsp; &nbsp; onLeftIconButtonClick={handleDrawerClick}//<---here&nbsp; &nbsp; />要关闭菜单，请提供一个 onClick 到父 div<div onClick={this.handleDrawerClick} className='product-list-wrapper'> //<----here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/*<ProductList products={products} />*/}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {getAppBar(this.handleDrawerClick)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {getMenuBar(this.state.isMenuOpened)}&nbsp; &nbsp; &nbsp; &nbsp; </div>