Jak dodać lub usunąć parametr className na zdarzenie w ReactJS

Question

Jestem całkiem nowy, aby React i mam problem z konwersją mojego myślenia ze standardowego js.

W moim reagować składnik Mam następujący element:

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

Zachowanie szukam jest dodanie dodatkowej klasy na kliknięcia. Mój pierwszy pomysł polegał na próbie dodania klasy do funkcji obsługi kliknięcia, np.

nie byłem w stanie znaleźć żadnych przykładów, które robią coś podobnego, choć, więc jestem pewny, nie myślę o tym w odpowiedni sposób.

Czy ktoś może wskazać mi właściwy kierunek?

Answer 1

Listę klas można wyprowadzić ze stanu komponentu. Na przykład:

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

Wywołanie this.setState wywoła rerender składnika.

Answer 2

Dodaj atrybut ref do div:

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

Następnie w metodzie handleClick dostać elementu przez ref i wykorzystywać własności JavaScript classList:

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