javascript - TypeError:无法读取未定义的属性“切换”-classList.toggle 反应
问题描述
我需要通过单击一次按钮来切换 3 个元素的 css 类。这是我的代码。
import React from 'react';
import '../css/MenuIcon.css'
class MenuIcon extends React.Component {
handleClick = (e) => {
e.classList.toggle('change')
}
render() {
return (
<div className="container" onClick={this.handleClick}>
<div className="bar1"></div>
<div className="bar2"></div>
<div className="bar3"></div>
</div>
);
}
}
export default MenuIcon;
下面是css代码..
.bar1, .bar2, .bar3{
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: 0.4s;
}
.container {
cursor: pointer;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
这是香草javascript中的解决方案,但它在反应中不起作用会引发错误说-
TypeError:无法读取未定义的属性“切换”
function myFunction(x) {
x.classList.toggle("change");
}
请帮助解决问题!
解决方案
对于handleClick
函数e
是事件,触发事件的元素是e.target
,所以要访问元素的classList,你应该调用e.target.classList.toggle('change')
推荐阅读
- python - Python:将文本文件解析为格式化的 json 文件
- ruby-on-rails - 服务调用未更新 Active Record 值以增加连接模型
- macos - 如何摆脱 AppleScript 中字符串的特定部分?
- oauth-2.0 - 基于 OAuth2 的 SSO
- python - 将 npArrays 转换为整数
- python - 为什么我不能访问另一台计算机上的简单 Python 服务器?
- python - p.stdout.readline() 在 True 时中断:
- css - 在 CSS 中使用 ::first-letter 时个性化 ::selection 不起作用
- javascript - 从 javascript JSON 解析 PHP 中的数组
- three.js - 如何使用带负近平面的 OrthographicCamera 的 Three.js Raycaster?