tengo un estado
const [textColor, setTextColor] = useState({ darkText: false, lightText: false, allTextSelected: false, })Ahora quiero actualizar este estado condicionalmente, si darkText es verdadero, hágalo falso y viceversa
Uso de operador ternario y devolución de llamada
const onClickDarkText = () => { setTextColor((prevState) => ( prevState.darkText ? { ...prevState, darkText: false } : { ...prevState, darkText: true } )) }El lado izquierdo no funciona
Usando si/si no
const onClickDarkText = () => { if (textColor.darkText) { setTextColor({ darkText: false, lightText: false, allTextSelected: false, }) setEmptyFilter(true) } else { setTextColor({ darkText: true, lightText: false, allTextSelected: false, }) setEmptyFilter(false) } }darkText no vuelve a ser falso una vez que se vuelve verdadero
Me alegraría si me ayudas a encontrar lo que está mal.
Puede alternar el estado del texto oscuro. Por favor, consulte el código:
import React, { useState } from 'react'; export default function App() { const [textColor, setTextColor] = useState({ darkText: false, lightText: false, allTextSelected: false, }); const handleClick = () => { setTextColor((prevState) => { return { ...prevState, darkText: !prevState.darkText }; }); }; console.log('textColor.darkText', textColor.darkText); return ( <div> {textColor.darkText ? <div>textColor is true</div> : null} <button onClick={handleClick}>Click</button> </div> ); }No necesita si más, puede alternarlo así:
const onClickDarkText = () => { // ...textColor will spread all the current values on the new value // toggle darkText with its new value using ! setTextColor({ ...textColor, darkText : !textColor.darkText}) }