向父 DOM 元素添加/删除类 React js答案

【问题标题】：Add/Remove class to parent DOM element React js向父 DOM 元素添加/删除类 React js
【发布时间】：2019-02-21 04:01:35
【问题描述】：

我想在单击添加/删除按钮时从父 DOM 元素中添加/删除类，就像我单击添加类按钮然后它将新的类名“单击”添加到父 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>
        );
    }
});

【问题讨论】：

状态应该向下传播，而不是向上传播。也许您也可以处理父级中的事件并将该状态作为道具传递
@Robbie Averill 你能解释一下或者给我一些示例代码，因为我是新手，谢谢。
轻量级示例：jsfiddle.net/8en4vdbz Ramya 的回答总结了一下，但假设您可以访问当前组件中的 div

标签： reactjs

【解决方案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()

【讨论】：

【解决方案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 的回答，但使用状态总是比使用引用更好。见here

【讨论】：

请看这个并回答stackoverflow.com/q/58040667/2479903

【解决方案3】：

您可以将类添加和删除到特定的 div (onClick)。如果您必须设置和删除按钮等状态，最好使用 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>
    );
}
});

【讨论】：

【解决方案4】：

您可以查看目标类表单 BOM 元素并从类列表中删除类，如 event.target.classList.remove('要删除的类名')

【讨论】：

【解决方案5】：

编写上述答案，但使用 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>
 }

}

【讨论】：