tengo algunos botones cada vez que hago clic en un botón quiero que se resalte cambiando el color de fondo del botón hasta que se haga clic en cualquier otro botón
function clickedtime(e) { var time = e.target.value; settime(time); } <TabPanel className="tabcss" style={styles.tabpannel}> <button onClick={clickedtime} value="9:00am" style={styles.button} > 9:00am </button> <button onClick={clickedtime} value="9:30am" style={styles.button} > 9:30am </button> .... </TabPanel>Use el controlador de eventos y useState para configurar el color al hacer clic así
const[btn,setBtn]=useState([0,0]);//mean two button const[sel,setSel]=useState(0);//mean 0 button is selected by default function clickedtime(e,index) { var time = e.target.value; settime(time); setSel(index)//selected btn is 0in this case }ahora, para su panel de pestañas, cambie el estilo a estilo = {{backgroundColor: col}} también cambie el estilo del panel de pestañas como mencioné
<TabPanel className="tabcss" style={styles.tabpannel}> btn.map((item,index)=>{ sel==index? <button onClick={(index)=>{clickedtime(index)}} value="9:00am" style={{backgroundColor:"red"}} > 9:00am </button> : <button onClick={clickedtime} value="9:00am" style={{backgroundColor:"white"}} > 9:00am </button> } .... </TabPanel>Puede agregar todos los botones a una clase, agregarles un detector de eventos y luego tener otra clase llamada "hacer clic" adjunta a ellos cuando se activa el evento de clic.
var buttons = document.getElementsByClassName("time-button"); var click_listener = function(event) { //console.log("clicked " + event.target); for (var i = 0; i < buttons.length; i++) { buttons[i].classList.remove("clicked"); } event.target.classList.add("clicked"); }; for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", click_listener, false); } .clicked { background-color: orange; } <button class="time-button">9:30 am</button> <button class="time-button">9:00 am</button> <button class="time-button">8:30 am</button> <button class="time-button">8:00 am</button>