Necesito 2 botones, uno para el lado "izquierdo" y otro para el lado "derecho". Hice un componente separado (subcarpeta) que estoy llamando en el archivo principal. Cuando el usuario hace clic en cierto botón, debe volverse "activo", obteniendo la clase "cuadrado-redondo-activo" para que se muestre en la GUI. Sin embargo, actualmente tengo problemas para descubrir cómo hacerlo en 2 botones separados, solo uno de ellos puede estar activo en ese momento. En mi código actual, los botones simplemente se activan entre sí cuando se hace clic en cualquiera de ellos. Como puedo resolver esto ?
const [isActive, setActive] = useState(false); const toggleClass = () => { setActive(!isActive); }; <ul class="buttons-in-line no-bullets flex-line"> <li> <button type="button" className={isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'} onClick={toggleClass} >Left</button> </li> <li> <button type="button" className={!isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'} onClick={toggleClass} >Right</button> </li> </ul>Estoy haciendo esto como un marcador de posición por ahora, pero más adelante tengo que ajustar el código para que funcione con el backend, enviando a los usuarios la selección (izquierda o derecha) como valor booleano. Estoy agregando el código de back-end a continuación, si alguien tiene alguna idea de cómo juntar todo, realmente lo agradecería.
const inoAPI = new konfiguratorreact.client.api.InoAPI(); Getters: inoAPI.getSestav().isOdpiranjeLevo(); // boolean inoAPI.getSestav().isOdpiranjeDesno(); // boolean Setters: inoAPI.getSestav().setOdpiranjeDesno(callback(success, error))) inoAPI.getSestav().setOdpiranjeLevo(callback(success, error)))Actualmente no tiene ninguna forma de realizar un seguimiento de qué botón se hace clic. Algo como esto debería funcionar.
const ToggleComponent = ({ onToggle }) => { const [isActive, setActive] = useState(false); const toggleClass = (isLeft) => { onToggle(isLeft); if (isLeft) setActive(true); else setActive(false); }; <ul class="buttons-in-line no-bullets flex-line"> <li> <button type="button" className={isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'} onClick={() => toggleClass(true)} >Left</button> </li> <li> <button type="button" className={!isActive ? 'square-round square-round--active square-round--min-width' : 'square-round square-round--min-width'} onClick={() => toggleClass(false)} >Right</button> </li> </ul> }Componente principal
const ParentComponent = () => { [isActive, setIsActive] = useState(false); const handleToggle = (isActive) => { setActive(isActive); } return ( <ToggleComponent onToggle={handleToggle} /> ); }