Wie kann ich mit React eine Klasse per Klick umschalten?

Ich versuche herauszufinden, wie man eine aktive Klasse beim Klicken umschaltet, um CSS-Eigenschaften zu ändern.

Mein Code ist unten. Kann mir jemand raten, wie ich das machen soll? Ist es möglich, dies zu tun, ohne für jedes Element eine neue Komponente zu erstellen?

class Test extends Component(){

    constructor(props) {
  
    super(props);
    this.addActiveClass= this.addActiveClass.bind(this);
  
  }
  
  addActiveClass() {
    
    //not sure what to do here
    
  }

    render() {
    <div>
      <div onClick={this.addActiveClass}>
        <p>1</p>
      </div>
      <div onClick={this.addActiveClass}>
        <p>2</p>
      </div>
        <div onClick={this.addActiveClass}>
        <p>3</p>
      </div>
    </div>
  }

}

Zustand verwenden. Siehe die Reagieren Sie auf Dokumente.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

Sie können dies auch mit tun Haken.

function MyComponent (props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div 
      className={isActive ? 'your_className': null} 
      onClick={toggleClass} 
    >
      <p>{props.text}</p>
    </div>
   );
}  

Am liebsten verwende ich die && Operator in einer Inline if Aussage. Meiner Meinung nach gibt es auf diese Weise eine sauberere Codebasis.

Im Allgemeinen könntest du so etwas tun:

render(){
return(
  <div>
    <button className={this.state.active && 'active'}
      onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>
  </div>
)
}

Denken Sie nur daran, dass Pfeilfunktionen eine ES6-Funktion sind, und denken Sie daran, sie einzustellen this.state.active Wert im Klassenkonstruktor.

this.state = { active: false }

Oder wenn Sie CSS in JSX einfügen möchten, können Sie dies folgendermaßen tun:

<button style={this.state.active && style.button} >button</button>

Und Sie können die Stil-JSON-Variable deklarieren:

const style = { button: { background:'red' } }

Denken Sie daran, camelCase für JSX-Stylesheets zu verwenden.

Nun, Ihre addActiveClass muss wissen, worauf geklickt wurde. So etwas könnte funktionieren (beachten Sie, dass ich die Informationen, welche Divs aktiv sind, als Statusarray hinzugefügt habe und dass onClick nun die Informationen, auf die geklickt wurde, als Parameter übergibt, wonach der Status entsprechend aktualisiert wird – es gibt sicherlich intelligentere Möglichkeiten dazu mach es, aber du verstehst die Idee).

class Test extends Component(){

  constructor(props) {
    super(props);
    this.state = {activeClasses: [false, false, false]};
    this.addActiveClass= this.addActiveClass.bind(this);
  }

  addActiveClass(index) {
    const activeClasses = [...this.state.activeClasses.slice(0, index), !this.state.activeClasses[index], this.state.activeClasses.slice(index + 1)].flat();
    this.setState({activeClasses});
  }

  render() {
    const activeClasses = this.state.activeClasses.slice();
    return (
      <div>
        <div className={activeClasses[0]? "active" : "inactive"} onClick={() => this.addActiveClass(0)}>
          <p>0</p>
        </div>
        <div className={activeClasses[1]? "active" : "inactive"} onClick={() => this.addActiveClass(1)}>
          <p>1</p>
        </div>
          <div  onClick={() => this.addActiveClass(2)}>
          <p>2</p>
        </div>
      </div>
    );
  }
}

React hat ein Konzept des Komponentenzustands, also wenn du ihn wechseln willst, tue a setState:

constructor(props) {
  super(props);

  this.addActiveClass= this.addActiveClass.bind(this);
  this.state = {
    isActive: false
  }
}

addActiveClass() {
  this.setState({
    isActive: true
  })
}

In Ihrer Komponentenverwendung this.state.isActive zu rendern, was Sie brauchen.

Dies wird komplizierter, wenn Sie den Status in Komponente Nr. 1 festlegen und ihn in Komponente Nr. 2 verwenden möchten. Graben Sie einfach mehr in den unidirektionalen Datenfluss und möglicherweise Redux, das Ihnen hilft, damit umzugehen.

Mit React können Sie jeder ID / jedem Element eine Toggle-Klasse hinzufügen, versuchen Sie es

style.css

.hide-text{
    display: none !important;
    /* transition: 2s all ease-in 0.9s; */
  }
.left-menu-main-link{
    transition: all ease-in 0.4s;
}
.leftbar-open{
    width: 240px;
    min-width: 240px;
    /* transition: all ease-in 0.4s; */
}
.leftbar-close{
    width: 88px;
    min-width:88px;
    transition: all ease-in 0.4s;
}

Dateiname.js

......
    ToggleMenu=()=>{
             this.setState({
                isActive: !this.state.isActive
              })
              console.log(this.state.isActive)
        }
        render() {
            return (
                <div className={this.state.isActive===true ? "left-panel leftbar-open" : "left-panel leftbar-close"} id="leftPanel">
                    <div className="top-logo-container"  onClick={this.ToggleMenu}>
                            <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome!</span>
                    </div>

                    <div className="welcome-member">
                        <span className={this.state.isActive===true ? "left-menu-main-link hide-from-menu" : "hide-text"}>Welcome<br/>SDO Rizwan</span>
                    </div>
    )
    }
......

Die obigen Antworten funktionieren, aber falls Sie einen anderen Ansatz wünschen, versuchen Sie es mit classname: https://github.com/JedWatson/classnames