ReactJS - 使用 onclick 切换类 [重复]答案

【问题标题】：ReactJS - toggle a class with an onclick [duplicate]ReactJS - 使用 onclick 切换类 [重复]
【发布时间】：2019-04-03 20:28:14
【问题描述】：

我有一个带有 onclick 功能的标签：

onClick={addActive.bind(this)}

我的函数需要打开/关闭一个类

function addActive(e){
alert("working");
e.classList.toggle("active");
}

我需要弄清楚如何让它工作，或者如何使它与我的函数中的一些 reactJS 一起工作。

单击时，警报正常工作，但切换不正常。

任何见解将不胜感激。我对 reactJS 很陌生。

我不确定的部分是e.classList.toggle 部分，用于识别正确的元素。

【问题讨论】：

已编辑。这是目标……如果我需要更好地表达这一点，请告诉我。

标签： javascript reactjs

【解决方案1】：

修复您当前的代码：e 是一个事件，e.target 是元素。

反应的方式是在状态中保留一个布尔值，更新 onClick 并将状态反映到元素类。首先你需要一个布尔值，例如：

 state = { isActive: false };

然后稍后在render() 中将其用作：

 const { isActive } = state;

return (
 //...
 <div className={isActive ? active : ""} onClick={() => this.setState({ isActive: !isActive })} >Click me</div>
);

【讨论】：

感谢这个。 e.target 是我所缺少的。