时间戳

首页 > 解决方案 > 单击按钮时如何在 ReactJS 中切换类名？

javascript - 单击按钮时如何在 ReactJS 中切换类名？

问题描述

单击按钮时，我想更改菜单的汉堡样式。className打开菜单的开关已经可以了，但是在更改我的汉堡菜单时遇到了问题。

这是我的构造函数和函数

constructor(props) {
    super(props)

    this.state = { menuOpen: true }
    this.toggleMenu = this.toggleMenu.bind(this);
}

toggleMenu = () => {
    const {show} = this.state;
    this.setState({show : !show});
}

我在本节中绑定了我的 toggleMenu 函数：

<div className={this.toggleMenu ? "hamburger hamburger--emphatic-r" : "hamburger hamburger--emphatic-r is-Active"} onClick={this.toggleMenu}>
<div className="hamburger-box">
<div className="hamburger-inner"></div>
</div>
</div>

我创建了一个名为 NavMenu 的类组件，并在用户单击汉堡菜单时传递该函数。

class NavMenu extends Component {
    render() {
        return (
            <nav className="isMobile">
                <ul>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#bottom2">Services</a></li>
                    <li><a href="/">Clients</a></li>
                    <li><a href="/">Contact</a></li>
                    <li><a href="/">Login</a></li>
                </ul>
             </nav>
        )
    }
}

这是我的整个班级组件，以充分了解该过程。 类组件源代码

import React, { Component } from 'react'

class nav extends Component {

constructor(props) {
super(props)

this.state = { menuOpen: true }
this.toggleMenu = this.toggleMenu.bind(this);
}

toggleMenu = () => {
const {show} = this.state;
this.setState({show : !show});
}

render() {
console.log(this.toggleMenu);
return (
<div id="nav_area">
<div className="nav_toggle_button">
<div className={this.toggleMenu ? "hamburger hamburger--emphatic-r" : "hamburger hamburger--emphatic-r is-Active"} onClick={this.toggleMenu}>
<div className="hamburger-box">
    <div className="hamburger-inner"></div>
</div>
</div>
</div>                    
<nav className="isWeb">
<ul>
    <li><a href="#about">About Us</a></li>
    <li><a href="#bottom2">Services</a></li>
    <li><a href="/">Clients</a></li>
    <li><a href="/">Contact</a></li>
    <li><a href="/">Login</a></li>
</ul>
</nav>
{this.state.show && <NavMenu/>}
</div>
)
}
}

class NavMenu extends Component {
render() {
return (
<nav className="isMobile">
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#bottom2">Services</a></li>
<li><a href="/">Clients</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/">Login</a></li>
</ul>
</nav>
)
}
}

export default nav

为了在单击时更改类名，这似乎缺少什么？我要解决的是，当单击汉堡菜单时，它将显示导航项，并将汉堡菜单从 更改hamburger hamburger--emphatic-r为hamburger hamburger--emphatic-r is-Active.

标签： javascripthtmlcssreactjs

解决方案

你的三元条件应该是this.state.show：

<div className={this.toggleMenu ? "hamburger hamburger--emphatic-r" : "hamburger hamburger--emphatic-r is-Active"} onClick={this.toggleMenu}>

应该

<div className={this.state.show ? "hamburger hamburger--emphatic-r" : "hamburger hamburger--emphatic-r is-Active"} onClick={this.toggleMenu}>

而且在构造函数中，您使用了错误的名称。它应该是：

this.state = { show: true }

推荐阅读