Refrescar estilos en js con react
Publicado por stuart (2 intervenciones) el 26/04/2020 16:55:49
Buenas estoy realizando un proyecto con react pero la duda es del código trascripta:
Tengo lo siguiente, es para cambiar los estilos cuando poso el ratón sobre el elemento y cuando lo quito de nuevo a los que estaban por defecto
En la función focusStyle tengo un if else lógico de ES6, todo funciona, me cambia el estado, pero solo cuando pongo el ratón sobre el elemento, cuando lo saco cambia el estado también pero no se aplican los otros estilos.
¿Alguna idea?
Tengo lo siguiente, es para cambiar los estilos cuando poso el ratón sobre el elemento y cuando lo quito de nuevo a los que estaban por defecto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
focusStyle(){
return {boxShadow: this.state.focus ? '2px 2px 4px red' : '10px 10px 10px #FFFFF' ,
}}setFocus = () => {
this.setState({ focus: !this.state.focus })
}dropFocus = () => {
this.setState({ focus: !this.state.focus })
}render() {
return (<li className="list-group-item m-4 border rounded col-md-2 text-center "
onMouseOut={this.dropFocus}
onMouseEnter={this.setFocus}
style={this.focusStyle()}>
<div><img src={'./images/categories/' + this.props.category.image} className="img-fluid m-3" /></div>{this.props.category.name}
</li>
)}En la función focusStyle tengo un if else lógico de ES6, todo funciona, me cambia el estado, pero solo cuando pongo el ratón sobre el elemento, cuando lo saco cambia el estado también pero no se aplican los otros estilos.
¿Alguna idea?
Valora esta pregunta
0