为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

喵喔喔 2022-09-23 09:24:59

我正在尝试一些反应。我正在将应用栏抽屉从 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'));


查看完整描述

2 回答

?
守候你守候我

TA贡献1464条经验 获得超10个赞

export const getAppBar = (handleDrawerClick) => {

  return(

    <AppBar 

      title="My AppBar" 

      className="st_appBarClass" 

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

      onLeftIconButtonClick={handleDrawerClick} //Remove ()

    />

  );

}


查看完整回答
反对 回复 2022-09-23
?
拉莫斯之舞

TA贡献1467条经验 获得超10个赞

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


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


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信