декларирование состояния в реакции

Question

У меня проблемы с добавлением следующего кода в только что созданное приложение activJS + 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 i.e: 16.8 вы теперь можете использовать состояние в своих функциональных компонентах, также используя новую концепцию HOOkS. Подробнее о хуках реагирования читайте здесь. В связи с вашей проблемой Material-UI прекратил поддержку класса в своих новых версиях, т.е. v4, поэтому теперь у них есть только функциональные компоненты, и они используют хуки реакции. Здесь вы можете сделать две вещи,

1. узнайте о перехватчиках реагирования и затем используйте их в ваших компонентах metarial-ui, чтобы написать свою собственную логику.
2. или используйте более старую версию материала, т. Е. 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, если хотите использовать хуки. также не забудьте импортировать useState из реакции, т.е.: import React,{useState} from 'react

Answer 2

Просто измените эту строку, так как у вас нет доступа к this внутри функционального компонента.

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

к этому,

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