Wie hinzufügen oder entfernen Sie einen Klassennamen auf Ereignis in ReactJS

Question

Ich bin ziemlich neu zu Reagieren und ich habe ein wenig mit der Konvertierung meiner Gedanken von Standard-js.

In meiner reagieren Komponente I das folgende Element haben:

<div className='base-state' onClick={this.handleClick}>click here</div> 

Das Verhalten ich suche ist eine zusätzliche Klasse auf Klick hinzuzufügen. Meine erste Idee war, zu versuchen, die Klasse in der Click-Handler-Funktion hinzuzufügen, z.

Ich habe nicht in der Lage gewesen, keine Beispiele zu finden, die ähnliche alles tun, obwohl, so dass ich bin ziemlich sicher, dass ich nicht über diesen in der richtigen Art und Weise zu denken.

Kann mir jemand in die richtige Richtung zeigen?

Answer 1

Die Liste der Klassen kann vom Status der Komponente abgeleitet werden. Zum Beispiel:

var Component = React.createClass({ 
    getInitialState: function() { 
    return { 
     clicked: false 
    }; 
    }, 

    handleClick: function() { 
    this.setState({clicked: true}); 
    }, 

    render: function() { 
    var className = this.state.clicked ? 'click-state' : 'base-state'; 
    return <div className={className} onClick={this.handleClick}>click here</div>; 
    } 
}); 

this.setState Aufruf wird eine rerender der Komponente auslösen.

Answer 2

ref Attribut div hinzufügen:

<div ref="element" className="base-state" onClick={this.handleClick}>click here</div> 

Dann in handle Methode ref erhalten Element und verwenden JavaScript classlist Eigenschaft:

handleClick =() => { 
    const element = this.refs.element; 
    element.classList.add('click-state'); 
} 

https://reactjs.org/docs/refs-and-the-dom.html

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList