Nuevo en la codificación y estoy tratando de hacer que haga clic en un botón y cambie el color de ese botón, luego, cuando haga clic en el botón que está justo al lado, ese botón cambia de color y el botón anterior vuelve a su color original Después de presionar el botón izquierdo, el enfoque debería cambiar nuevamente al botón izquierdo. He probado muchas, muchas cosas diferentes, pero esto es lo que tengo ahora.
const [buttonOneOn, setButtonOneOn] = useState(false) const [buttonTwoOn, setButtonTwoOn] = useState(false) function onChangeForFilter(e) { setButtonOneOn(prevButtonOn=>!prevButtonOn) if(buttonOneOn===true){ e.target.style.color = "grey" } else{e.target.style.color='blue'} if(buttonTwoOn===true){ setButtonOneOn(false) } } function onChangeForFilter2(e) { setButtonTwoOn(prevButtonOn=>!prevButtonOn) if(buttonTwoOn===true){ e.target.style.color='grey' } else{e.target.style.color='blue'} if(buttonOneOn===true){ setButtonOneOn(false) } }Obviamente, este código no hace lo que quiero en absoluto. No pude encontrar ninguna respuesta en línea. Si alguien tiene algún recurso se lo agradecería.
Realmente puedes lograr eso puramente en css. Aquí hay una muestra que puedes tocar. Déjame saber si esto es lo que quieres decir.
button { background-color: white; border-radius: 10px; color: black; } button:focus { background-color: red; border-radius: 10px; color: white; } <div> <button>My button 1</button> <button>My button 2</button> <button>My button 3</button> </div>Mi enfoque usa literales de estado y plantilla para jugar con className
import './css.css' export default function Buttonsso() { const [buttonOne, setButtonOne] = useState(false); const [buttonTwo, setButtonTwo] = useState(false); function eForBtn1() { setButtonOne(buttonOne=>!buttonOne); } function eForBtn2() { if(buttonOne === true & buttonTwo=== false) { setButtonOne(false); setButtonTwo(true); } } return ( <div> <button className={`${buttonOne ? "purple" : ""}`} onClick={() => eForBtn1()}>btn1</button> <button className={`${buttonTwo ? "orange" : ""}`} onClick={() => eForBtn2()}>btn2</button> </div> ) }El archivo css.css parece
.purple { background-color: purple; } .orange { background-color: orange; }No tengo su función de procesamiento, por lo que no pude trabajar en su código. Pero mi solución funciona seguro.