Tengo 3 botones en un grupo y un formulario. Cuando selecciono un botón, permanece activo, lo cual es el comportamiento correcto. Sin embargo, si hago clic en "enviar" en el formulario, el botón previamente seleccionado ya no está activo. ¿Cómo mantengo el botón activo incluso después de enviar el formulario? Estoy usando NextJS y estilos css.
const [position, setPosition] = useState(""); const categoryOptions = ["Left", "Middle", "Right"]; return ( <div className={styles.card}> {categoryOptions.map((category) => ( <button type="button" className={styles.buttonGroup} onClick={() => setPosition(category)} > {category} </button> ))} <form className={styles.form} onSubmit={someFunction}> <label htmlFor="amount">Amount</label> <input id={props.id} name="amount" type="number" required /> <button className={styles.button} type="submit"> Submit amount </button> </form> </div> )aquí está el css para los botones
.buttonGroup { color: #000000; border-radius: 0px; border: 0px; min-width: 80px; min-height: 30px; } .buttonGroup:hover { color: red; } .buttonGroup:focus, .buttonGroup:active { color: red; font-weight: bold; }Puede llamar a useRef para mantener su elemento activo y luego llamar a focus para recuperar su estado de enfoque de botón anterior. Por ejemplo
const [position, setPosition] = useState(""); const categoryOptions = ["Left", "Middle", "Right"]; const currentCategoryRef = useRef() return ( <div className={styles.card}> {categoryOptions.map((category) => ( <button type="button" className={styles.buttonGroup} onClick={(event) => { setPosition(category) currentCategoryRef.current = event.target //set current active button }} > {category} </button> ))} <form className={styles.form} onSubmit={someFunction}> <label htmlFor="amount">Amount</label> <input id={props.id} name="amount" type="number" required /> <button className={styles.button} type="submit" onClick={() => { setTimeout(() => currentCategoryRef.current && currentCategoryRef.current.focus()) //focus back to the previous button in categories }}> Submit amount </button> </form> </div> )