Tengo una aplicación de reacción similar a la que se muestra en este enlace de codesandbox https://codesandbox.io/s/eatery-forked-t44bx?fontsize=14&hidenavigation=1&theme=dark
Al hacer clic en el Menu en la parte inferior central de la página, se representa el componente MenuFilter .
Tal como lo tengo ahora, marcar la casilla de verificación actualiza inmediatamente los elementos marcados. Esto es bueno desde el punto de vista de la interfaz de usuario de usted. El usuario recibe comentarios instantáneos sobre lo que está haciendo clic (lo que se deja de hacer clic si se deja de hacer clic en algo).
Sin embargo, el problema es que el botón Aceptar/Cancelar pierde su uso. En otras palabras, después de realizar cambios en la selección, si el usuario decide que no desea ninguna de estas nuevas selecciones y prefiere volver a la selección anterior (la que tenía antes de hacer clic en el botón Menú), no puede hacerlo porque todas las los estados se han actualizado (la actualización ocurre cuando se hace clic en las casillas de verificación).
Cómo actualizar el estado SOLO si se hace clic en el botón OK (actualmente solo funciona el botón CANCELAR, por lo que puede considerarlo). Sin embargo, las marcas de verificación deberían cambiar a medida que el usuario hace clic en ellas.
¿Hay alguna forma de hacer esto que no sea crear un estado 'temporal' (no quiero hacer esto) para actualizar los cambios visuales y solo cuando se hace clic en un botón, los cambios se realizan en los datos?
Puede cambiar los checkedItems a un estado local del componente MenuFilter y pasarlo como argumento en onClick . De esa manera, cuando abre el modal, el componente se monta nuevamente y el estado debería volver a su valor predeterminado.
Algo como:
export const MenuFilter = ({ onClick, onCheck }) => { const [checkedItems, setCheckedItems] = useState(["allItems"]) return ( <button onClick={() => onClick(checkedItems)}>Cancel</button> ) }Editar : aún necesitará algún tipo de estado para manejar los datos en el componente principal, pero no tendrá que manejar manualmente el restablecimiento de los datos.