我想在单击添加/删除按钮时从父 DOM 元素添加/删除类,就像我单击添加类按钮一样,然后它将新的类名“clicked”添加到父 div 中,并在单击删除类按钮时删除该类:
索引.html
<div class="main-div">
<div class="second-div" id="config">
</div>
</div>
配置.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'Main';
ReactDOM.render(
<Main/>,
document.getElementById('config')
);
Main.jsx
import ReactDOM from 'react-dom'
import React from "react";
import createReactClass from "create-react-class";
export default createReactClass({
getInitialState() {
return {
show-main-div: false
};
},
addClass() {
// want to add new class on parent DOM element i.e <div class="main-div">
},
render: function () {
return (
<div>
<button className="add-class" onClick={() => {this.addClass()}}>
Add Class
</button>
<button className="remove-class" onClick={() => {this.removeClass()}}>
Remove Class
</button>
</div>
);
}
});
分配一个引用并添加/删除所需的类:
addClass() {
this.divRef.current.classList.add('main-div')
},
removeClass() {
this.divRef.current.classList.remove('main-div')
}
render: function () {
return (
<div ref={this.divRef}>
<button className="add-class" onClick={() => {this.addClass()}}>
Add Class
</button>
<button className="remove-class" onClick={() => {this.removeClass()}}>
Remove Class
</button>
</div>
);
}
// note: you have to create a ref inside the constructor:
this.divRef = React.createRef()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)