¿Alguien puede ayudarme a agregar una clase a un elemento de la lista en un evento de clic? Hasta ahora lo probé accediendo al atributo refs:

<li className="existing-class" refs={ name }  onClick={ this.sort.bind(this, name) }>Foo</li>

@action sort = (name) => {
  this.refs.name.className="existing-class another-class"
}

Sin embargo, esto no funciona ... ¿alguien puede ayudar?

¡Gracias de antemano!

0
Trung Tran 14 dic. 2016 a las 22:29

2 respuestas

La mejor respuesta

Solo para parchear su solución existente, intente acceder correctamente a la propiedad dinámica name: this.refs[name].className="some-class".

Pero para una solución más React-y, debe almacenar el estado en el componente principal de li para saber si se hizo clic en él, y luego establecer el className según el estado del padre.

1
Scimonster 14 dic. 2016 a las 19:32

Correcto, la forma correcta sería tener la clase del elemento controlada por state, en lugar del evento de clic.

P.ej. <li className={'existing-class ' + this.state.clicked ? 'some-class' : ''}>Foo</li>

Y haz que tu función onClick haga setState({clicked: true})

1
bryce 14 dic. 2016 a las 20:51