Soy bastante nuevo en React y estoy luchando un poco para convertir mi forma de pensar de js estándar.
En mi componente de reacción tengo el siguiente elemento:
<div className='base-state' onClick={this.handleClick}>click here</div>El comportamiento que estoy buscando es agregar una clase adicional al hacer clic. Mi primera idea fue intentar agregar la clase en la función del controlador de clics, por ejemplo
handleClick : function(e) { <add class "click-state" here> }Sin embargo, no he podido encontrar ningún ejemplo que haga algo similar, así que estoy bastante seguro de que no estoy pensando en esto de la manera correcta.
¿Alguien puede señalarme en la dirección correcta?
La lista de clases se puede derivar del estado del componente. Por ejemplo:
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>; } }); Llamar a this.setState activará una nueva representación del componente.
Podría usar solo un Vanilla JS ( event.target y classList ):
handleClick = event => event.target.classList.add('click-state'); render() { return <div className="base-state" onClick={this.handleClick}>Click here</div>; }¡PERO no hagas eso!
React debería manejar los cambios en el DOM, así que confíe en la modificación de las clases CSS a través de React.
Puede establecer el estado del clic en la función del controlador de clics y usarlo para establecer el nombre de la clase de forma condicional mediante un literal de plantilla.
Si está usando un componente de función, puede hacerlo de esta manera usando el gancho useState :
const [clicked, setClicked] = useState(false); <div className={ `base-state ${clicked && 'click-state'}` } onClick={ () => setClicked(true) }>click here</div>