反应如何在您点击后将 onclick 切换为 false？答案

【问题标题】：React how to toggle onclick to false after you already clicked?反应如何在您点击后将 onclick 切换为 false？
【发布时间】：2020-10-24 18:48:30
【问题描述】：

编辑：想通了。我更新了底部的答案

所以我想出了如何在我点击我的图标时将我的班级更改为活动状态，但我不确定每次再次点击时如何将其更改为 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 }
    ))
    }

【问题讨论】：

如果clicked:true 的值必须处于活动状态，否则false 必须处于非活动状态，因此您应该在每次点击时切换之前的点击状态。所以你需要以前的状态。 setState 在用作函数方式时，会为您提供以前的状态作为参数。该函数必须返回一个将被合并到状态的对象。 this.setState( (prevState) => ({ clicked: !prevState.clicked }));
是的，这正是我在问题的底部提出的。我最终弄清楚并添加了我的答案

标签： reactjs

【解决方案1】：

把你的handleClick改成这个：

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

【讨论】：

那行不通。我是通过查看 react 文档发现的，我必须先添加另一个函数并传入参数
感谢我的帖子的改进。我忘了这是一个类组件而不是功能性组件:)

【解决方案2】：

这应该可以解决问题

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

【讨论】：

【解决方案3】：

使用类名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})}>

【讨论】：

导入类名的目的是什么？似乎代码更难阅读和理解
它是一个用于有条件地加入类名的实用函数。它可以帮助您根据自己的情况添加或删除动态类。
你能链接讨论它的 reactdocs 吗？我是新来的，所以我以前从未见过