`exportar la función predeterminada Calificaciones (accesorios){ const[hover,setHover] =useState(false); // comprueba el estado de desplazamiento const [com, setCom] = useState(false); //verifica el estado del clic
function isHover(){ setHover(true);} //connects to onMouseOver event then sets the hover state function isNotHover(){ //connects to onMouseLeave event then sets the hover state setHover(false);} function op(){ //Send the Id of the rating button back to app.js so props.op(props.id);} // it can be then forwarded to another page function designs(){ //connects the click to sate, if the state is true it makes it false com ? setCom(false):setCom(true)} // and vice verca function bth(){ // I have two functions on click so this combines both op() //the functions and gives it as one to the clicke event designs()} pressed //is style after clicked rateStyle //is style before clicked return( <div style={hover|| com ? pressed: rateStyle} onMouseOver={isHover} onMouseLeave={isNotHover} onClick={bth} > {props.valN} </div>)}`Tengo cinco botones de clasificación y quiero quitar el clic del botón en el que ya se ha hecho clic cuando se hace clic en otro. Al hacer clic quiero decir, cuando hago clic en uno de los botones, su estilo cambia principalmente el color de fondo ahora quiero que cuando alguien presione otra calificación quiero que el estilo del botón en el que se hizo clic anteriormente vuelva a la normalidad y que el botón recién presionado se active ayuda estatal.
Usé este método para esta pregunta.
dentro de tu botón
<button id="button" onClick={ (e) => { if(res === "unpressed"){ //if button is pressed for first //time e.target.style.backgroundColor ="rgb(195, 197, 64)"; setRes(pressed); //Update res into false }else{ //if button is pressed for second //time e.target.style.backgroundColor ="rgb(195, 17, 64)"; setRes(unpressed); //Update res into false } } }> STAR </button>usando ganchos
import { useState } from "react"; const [res,setRes] = useState("unpressed");