在React js中向父级DOM元素添加/删除类

Question

我希望在点击添加/删除按钮时，能够从父DOM元素中添加/删除类，例如如果我点击添加类按钮，则将新的类名“clicked”添加到父div中，并在单击删除类按钮时删除该类：

index.html

<div class="main-div">

  <div class="second-div" id="config">
  </div>

</div>

config.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>
        );
    }
});

- Hassan Shahbaz

---

状态应该向下传播，而不是向上。也许您可以在父组件中处理事件，并将该状态作为属性向下传递。 - scrowler

@Robbie Averill，你能否解释得更详细一些或者给我一些示例代码呢？因为我对React还不熟悉，谢谢。 - Hassan Shahbaz

轻量级示例：https://jsfiddle.net/8en4vdbz/ Ramya的答案总结了一下，但假设您可以访问当前组件中的div。 - scrowler

Answer 1

分配一个引用并添加/删除所需的类：

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()

- Bhojendra Rauniyar

Answer 2

我建议您执行以下操作：

import ReactDOM from 'react-dom'
import React from "react";
import createReactClass from "create-react-class";


export default createReactClass({
    getInitialState() {
        return {
            main_div_class: "some_initial_class"
    };
    },

    addClass() {
        // append the class you want to add to this.state.main_div_class
        this.setState({main_div_class: new_value_with_added_class})
    },

    removeClass() {
        // remove the class you want to add from this.state.main_div_class
        this.setState({main_div_class: new_value_with_removed_class})
    }

    render: function () {
        return (
            <div className={this.state.main_div_class}>
                <button className="add-class" onClick={() => {this.addClass()}}>
                    Add Class
                </button>
        <button className="remove-class" onClick={() => {this.removeClass()}}>
                    Remove Class
                </button>
            </div>
        );
    }
});

我同意Bhojendra的回答，但是使用状态比引用更好。请参见这里

- Ramya

---

请查看此链接并回答 https://stackoverflow.com/q/58040667/2479903 - Daniel Smith

Answer 3

您可以通过onClick方法向特定div添加或删除class属性。如果您需要设置和删除按钮等元素的状态，建议使用setState方法。

addClass(e) {
                e.target.classList.add('yourclass');

}
removeClass(e){
                   e.target.classList.remove('yourclass');

 }

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>
    );
}
});

- Hema Ramasamy

Answer 4

使用useRef和setTimeout编写上述答案，以根据特定间隔添加/删除类。

import React,{useRef} from 'react';

export default some fucntion  ... {

Note: You have to first define your useRef.

const node = useRef(""); // this is your initial value of ref

// this is called when the div is clicked
const handingRef = ()=>{ 

   let timeout = null;

  
   // to add class, you can do
    node.current.classList.add("name of the class");
   
    // to remove the class, you can do
    node.current.classList.remove("name of the class");

    // to clear setInterval

    if(timeout){
      clearTimeout(timeout)
      timeout=null;
     }

   // if you want to remove a class after some time

    setTimeout(()=>{
      node.current.classList.remove('Section1-row1-shopClosed')
    
     },time in milli-second)

}

return(){
  <div>
  ...
     <div ref={node} onClick={handingRef}> {content ... } </div>

 </div>
 }

}

- Ayush Verma

Answer 5

你可以查看目标类的 BOM 元素并从 classlist 中删除该类，例如 event.target.classList.remove('你想要删除的类名')。

- gokul-r-16

Answer 6

<div className="myDiv">
    <input type="button"
        onClick={(e)=>e.target.parentNode.classList.add('open')}>
    </input>
</div>

- Mostafa Mohammadzadeh

---

最好解释你的答案。 - Rohit Gupta