我想检查目标元素是否包含一个类。如果不添加类,如果是,则删除课程。
class Hello extends React.component{
addActiveClass(e){
if(e.target.classList.contains("active")){
//I wanna to add active class to e.target
}else{
//I wanna to remove active class from e.target
//I wanna to do something like e.target.classList.removeClass("atcive");
}
}
render() {
<div className="red green blue" onClick={this.addActiveClass}>Hello World</div>
<div className="red green blue" onClick={this.addActiveClass}>Good Bye World</div>
}
}
我想将类添加和删除仅为目标元素而不是其他元素。
您可以利用状态存储活动div,然后有条件地添加活动类
class Hello extends React.Component{ /* Be sure to capitalize the C in Component */
state = {
active: ''
}
addActiveClass(e){
const clicked = e.target.id
if(this.state.active === clicked) {
this.setState({active: ''});
} else {
this.setState({active: clicked})
}
}
render() {
return (
<div>
<div className={`red green blue ${this.state.active === "first"? 'active': ''}`} id="first" onClick={this.addActiveClass}>Hello World</div>
<div className={`red green blue ${this.state.active === "second"? 'active': ''}`} id="second" onClick={this.addActiveClass}>Good Bye World</div>
</div>
)
}
}
我的答案与其他人相似,但我喜欢这部分我在这里所做的事情:
class ChildComp extends React.Component{
super(props);
this.state = {
active: false
}
toggle(e){
this.setState({active: !this.state.active});
}
render(){
return(
<div
className={classNames(
"red green blue",
this.state.active ? "active" : ""
)}
onClick={e => this.toggle(e)}
>
{this.props.text}
</div>
);
}
}
class Hello extends React.Component{
render(){
return(
<div>
<ChildComp text="Hello World"/>
<ChildComp text="GoodBye World"/>
</div>
);
}
}