Come aggiungere o rimuovere una classeName sull'evento in ReactJS

Question

Sono abbastanza nuovo per React e sto facendo fatica a convertire il mio modo di pensare da js standard.

Nel mio reagiscono componente ho il seguente elemento:

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

Il comportamento che sto cercando di aggiungere una classe in più al clic. La mia prima idea era provare e aggiungere la classe nella funzione di gestione dei clic, ad es.

non sono stato in grado di trovare qualsiasi esempi che fanno qualcosa di simile, però, quindi sono abbastanza sicuro che non sto pensando a questo nel modo giusto.

Qualcuno può indicarmi la giusta direzione?

Answer 1

L'elenco di classi può essere derivato dallo stato del componente. Per esempio:

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

Calling this.setState attiveranno un nuovamente sottoposti a rendering del componente.

Answer 2

Aggiungi attributo ref al div:

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

Poi nel metodo handleClick ottenere elemento da ref e utilizzare JavaScript classList proprietà:

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