Question

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

onClick={addActive.bind(this)}

我的功能需要打开/关闭一个类

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

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

单击后，警报可以正常工作，但切换开关无效。

任何见识将不胜感激。我对ReactJS很陌生。

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

Answer 1

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

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

 state = { isActive: false };

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

 const { isActive } = state;

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

Answer 2

onClick={() => addActive.bind(this)}

在基于类的组件中使用箭头功能，而不要bind()中的每个组件。

onClick={this.addActive}
const addActive= e =>{
    alert("working");
   e.classList.toggle("active");
}

ReactJS-使用onclick

2 个答案: