Question

我正在使用基于功能的组件构建应用。我在类中的材料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

Answer 1

您可以改为执行此操作。

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

然后返回

onClick={toggleDrawer}

您的函数正在堆叠。在onclick上，您尝试调用函数来调用函数。只需使用const即可。

在toggleDrawer常量上，应将setDrawerOpened设置为只要与值相反即可获得切换效果。

Answer 2

看看React挂钩，有两种方法：

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

React.js：如何将基于类的组件转换为功能？

2 个答案: