在 reactJS 中声明状态

Question

我在将以下代码添加到新创建的 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>
    )

}

我的代码（有效）

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;

我想要做的是制作一个按钮，按下它会改变图标我尝试了以下操作

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>
    );
  }

Answer 1

发生这种情况是因为您尝试在功能组件中创建状态，在以前的 react 版本中，您无法访问它们也习惯于调用的功能组件（无状态组件）中的状态。但是在最新版本的 React （即 16.8）之后，您现在可以在功能组件中使用状态以及使用新概念 HOOkS。 Read more about react hooks from here. 针对您的问题，material-ui 已在其较新版本（即 v4）中结束了对类的支持，因此现在它们只有功能组件并且它们使用反应钩子。在这里你可以做两件事，

1. 了解 React 钩子，然后在您的 metal-ui 组件中使用它们来编写您的自定义逻辑。
2. 或使用旧版本的材料 ui，即：v3.9，您可以在其中访问类组件。

你可以像这样解决当前的问题，（使用钩子）

    function Nav() {
const classes = useStyles();
const [icon,setIcon] = useState(true)

const handleClick = e => {
  setIcon(!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={handleClick}>
        { icon ? 'add' : 'remove'}
    </i>

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

}

如果您想使用钩子，请确保您已响应 16.8 版。也不要忘记从 react 导入 useState 即：import React,{useState} from 'react

Answer 2

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

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

到这里，

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