En mi aplicación de reacción tengo un estado inicial como este:

state= {
  graphBackgroundColor: '#fff',
  graphLabelColor: '#000',
} 

Tengo una casilla de verificación que llama a esta función:

toggleCOlor = event => {
 console.log('toggling color');
  this.setState({
    graphBackgroundColor: '#000',
    graphLabelColor: '#fff',
    renderCalories: event.target.value === 10
  });
}

Esto funciona funcionalmente, pero no importa si ckeckbox está marcado o no, los colores ahora se mantendrán en lo que estaban configurados en esa función. ¿Cómo puedo hacer que esto cambie para que si la casilla de verificación está marcada, graphBackgroundColor es # 000 y si no está marcada es #fff?

1
Tom N. 7 may. 2020 a las 06:46

3 respuestas

La mejor respuesta
toggleCOlor = event => {
 console.log('toggling color');
  this.setState({
    graphBackgroundColor: this.state.graphBackgroundColor === '#000' ? '#fff' : '#000',
    graphLabelColor: this.state.graphLabelColor === '#fff' ? '#000' : '#fff',
    renderCalories: event.target.value === 10
  });
}

Si lo desea, puede escribir una función que pase el color actual y devolver el color activado en lugar del operador ternario con líneas.

returnAlternateColor = (color) => {
    if(color === "#fff") return '#000;
    if(color === '#000') return '#fff';
}

Y luego llame a esta función pasando this.state.graphLabelColor en lugar del operador ternario. De esta manera puedes tener aún más opciones.

2
illiteratewriter 7 may. 2020 a las 03:52

Crear una función en Cambiar para marcar o desmarcar

onChange=(e)=>{
 [e.target.name]:e.target.value
}

Puede crear una función, por ejemplo, para cambiar de color:

myStyleWithConditional=()=>{
   background:event.target.value === 10? "#000":"#fff"
}

Y a tu regreso

<div style={this.myStyleWithConditional}></div>
<input type="checkbox" name="check" value=10>
1
x-rw 7 may. 2020 a las 04:14

Se puede tratar de

     this.setState(prevState => ({
      graphBackgroundColor: prevState.graphBackgroundColor === '#000' ? '#fff' : '#000',
      graphLabelColor: prevState.graphLabelColor === '#fff' ? '#000' : '#fff',
       renderCalories: event.target.value === 10
    }));
3
Hải Vũ 7 may. 2020 a las 04:06