Question

编辑：找到答案。我在底部更新了答案

因此，我想出了每当单击图标时如何将班级更改为活动的班级，但是我不确定每次单击该班级时如何将其更改为false？

class NavbarItems extends Component {
state = { clicked: false}

handleClick = () => {
    this.setState({ clicked: true })
}

 render() {
    return (
        <nav className="NavbarItems">
            <h1 className="navbar-logo">Startup</h1>
            <div className='menu-icon' onClick={this.handleClick}>
            <i class="fas fa-bars"></i>
            </div>
            <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>

单击菜单图标后，如何将ul className更改回“ nav-menu”？

现在，当我单击它时，它将添加活动类，但是我不知道如何再次单击以删除该活动类

handleClick = () => {
    this.setState(clicked => (
        { clicked: !clicked.clicked }
    ))
    }

Answer 1

更改您的句柄单击为此：

handleClick = () => {
  this.setState(prevState => ({
    clicked: !prevState.clicked
  }))
}

Answer 2

使用类名https://www.npmjs.com/package/classnames

npm install classnames --save

在您的组件中

import cx from 'classnames';

class NavbarItems extends Component {
state = { clicked: false}

handleClick = () => {
    this.setState({ clicked: !this.state.clicked })
}

 render() {
    return (
        <nav className="NavbarItems">
            <h1 className="navbar-logo">Startup</h1>
            <div className='menu-icon' onClick={this.handleClick}>
            <i class="fas fa-bars"></i>
            </div>
            <ul className={cx('nav-menu', {['active']: this.state.clicked})}>

Answer 3

这应该可以解决问题

 handleClick = () => {
    this.setState({ clicked: !this.state.clicked });
  };

在您单击后如何将onclick切换为false？

3 个答案: