在reactJS中声明状态

我在将以下代码添加到新创建的reactJS+Material UI应用程序时遇到问题

要集成的代码

state = { icon: true }

handleClick = e => {
    const { icon } = this.state
    this.setState({ icon: !icon })   
}

render() {
    const { icon } = this.state
    return(
        <i className='large material-icons' onClick={this.handleClick}>
            { icon ? 'add' : 'remove'}
        </i>
    )

}

state={icon:true}
handleClick=e=>{
const{icon}=this.state
this.setState（{icon:！icon}）
}
render（）{
const{icon}=this.state
返回(
{图标？'add'：'remove'}
)
}

我的代码（有效）

Nav.js

import React from 'react';
import ReactDOM from "react-dom";
import { makeStyles } from '@material-ui/core/styles';
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';


const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }));


  function Nav() {
    const classes = useStyles();

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
    );
  }

  export default Nav;

从“React”导入React；
从“react dom”导入react dom；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Menu”导入菜单图标；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
},
}));
函数Nav（）{
const classes=useStyles（）；
返回(
消息
登录
);
}
导出默认导航；

我想做的是做一个按钮，当按下它时，它会改变图标，我尝试了以下方法

function Nav() {
    const classes = useStyles();
    const state = { icon: true }

    handleClick = e => {
      const { icon } = this.state
      this.setState({ icon: !icon })   
    }

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
            <i className='large material-icons' onClick={this.handleClick}>
            { icon ? 'add' : 'remove'}
        </i>

          </Toolbar>
        </AppBar>
      </div>
    );
  }

函数导航（）{
const classes=useStyles（）；
常量状态={icon:true}
handleClick=e=>{
const{icon}=this.state
this.setState（{icon:！icon}）
}
返回(
消息
登录
{图标？'add'：'remove'}
);
}

发生这种情况是因为您试图在功能组件中创建状态，而在以前版本的react中，您无法访问功能组件中的状态（无状态组件）。但是在React的最新版本（即：16.8）之后，您现在可以使用新概念在功能组件中使用状态。针对您的问题，material ui在其较新版本（即v4）中已经结束了对类的支持，因此现在它们只有功能组件，并且使用react挂钩。在这里你可以做两件事

了解react钩子，然后在MetarialUI组件中使用它们来编写自定义逻辑

或者使用旧版本的material ui，即：v3.9，您可以在其中访问类组件

您可以像这样解决当前的问题（使用挂钩）

函数导航（）{
const classes=useStyles（）；
const[icon，setIcon]=useState（真）
常量handleClick=e=>{
设置图标（！图标）
}
返回(
消息
登录
{图标？'add'：'remove'}
);

}

---

如果您想使用钩子，请确保您已经使用了react版本16.8。另外，不要忘记从react导入useState，即：

import react，{useState}from'react

只需更改此行，因为您无权访问功能组件内部的

此

<i className='large material-icons' onClick={this.handleClick}>

对此,

<i className='large material-icons' onClick={handleClick}>

谢谢，但我仍然收到错误行28:“handleClick”未定义no undef通过将其设为函数handleClick（）{setIcon（！icon）}并删除它来解决。是的，因为您无法在函数中访问它，我们在类组件中使用它，我已经编辑了我的答案，现在尝试删除它，在调用句柄click funct并声明它时，在变量中声明它

<i className='large material-icons' onClick={handleClick}>