1

我正在使用基于函数的组件构建应用程序。我在类中找到了Material Ui的侧边栏菜单模板，并希望将其转换为功能组件。但是转换后点击按钮不起作用。我只是将菜单图标更改为另一个。任何帮助将不胜感激。
这是类中的默认组件


import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { NavDrawer } from "./NavDrawer";

class NavBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      drawerOpened: false
    };
  }
  toggleDrawer = booleanValue => () => {
    this.setState({
      drawerOpened: booleanValue
    });
  };

  render() {
    return (
      <div className="App">
        <AppBar position="static">
          <Toolbar>
            <IconButton
              color="secondary"
              aria-label="Menu"
              onClick={this.toggleDrawer(true)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit">
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>

        <NavDrawer
          drawerOpened={this.state.drawerOpened}
          toggleDrawer={this.toggleDrawer}
        />
      </div>
    );
  }
}

export default NavBar

在这里我正在尝试转换


import React, { useState } from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import IconButton from '@material-ui/core/IconButton'
import NavDrawer from './NavDrawer'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'

function NavBar(props) {
  const [drawerOpened, setDrawerOpened] = useState(false)

  const toggleDrawer = booleanValue => () => {
    setDrawerOpened(booleanValue)
  }

  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <IconButton
            aria-label="AddShoppingCartIcon"
            onClick={() => toggleDrawer(true)}
          >
            <AddShoppingCartIcon style={{ fontSize: 30 }} color="secondary" />
          </IconButton>
          <Typography variant="h6" color="inherit"></Typography>
        </Toolbar>
      </AppBar>

      <NavDrawer drawerOpened={drawerOpened} toggleDrawer={toggleDrawer} />
    </div>
  )
}

export default NavBar
4

2 回答 2

0

看看 React hooks，有两种方法：

const [toggleDrawer, setToggleDrawer] = useState(false);   // set variable
  <button onClick={() => setToggleDrawer(!toggleDrawer}>

你可以使用Effect在组件初始渲染后执行一些逻辑，防止出现最大错误：

const toggleDrawer = false;

          useEffect(() => {   // update variable
            checkDrawOpened(toggleDrawer)
          }, toggleDrawer);]

With the one click

onClick={toggleDrawer}  // use variable
于 2020-09-20T10:09:25.863 回答
0

您可以改为执行此操作来切换操作。

const toggleDrawer = () => {
    setDrawerOpened(!drawerOpened)
}

而在回报

onClick={toggleDrawer}

你的功能是堆叠。在 onclick 上，您尝试调用函数来调用函数。只需使用 const 代替。

在 toggleDrawer const 上，您应该将 setDrawerOpened 设置为任何与它相反的值以获得切换效果。

于 2020-09-20T09:30:48.987 回答