Tengo un modal con una forma larga en mi aplicación de reacción. Entonces, cuando envío el formulario, muestro los mensajes de validación del servidor en la parte superior del formulario. Entonces, el usuario tiene que desplazarse hasta la parte superior para ver los mensajes. Así que quiero desplazarme automáticamente hacia arriba cuando aparezca el mensaje. Así que agregué el siguiente código en la función de controlador de envío. Pero no está funcionando.
setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }]) window.scrollTo({ top: 0, left: 0, behavior: "smooth" });Está tratando de desplazarse por la ventana, pero es probable que su ventana ya esté en la parte superior, es su elemento modal el que necesita desplazarse hacia arriba.
Para hacer esto, crearía una referencia al elemento modal, luego, en su función, desplace el elemento modal a través de la referencia, algo así como:
import React, {useRef} from 'react'; const Modal = (props) => { // use the useRef hook to store a reference to the element const modalRef = useRef(); const setAddModalErrorMsg = () => { // check the ref exists (it should always exist, it's declared in the JSX below), and call a regular javascript scrollTo function on it modalRef.current?.scrollTo({x: 0, y: 0, animated: false}); } // see here we create a reference to the div that needs scrolled return ( <div ref={modalRef}> { // your modal content } </div> ) }para desplazarnos automáticamente hacia la parte superior, podemos usar el siguiente código:
constructor(props) { super(props) this.myRef = React.createRef() // Create a ref object }agregue la función scrollTo después de setAddModalErrorMsg.
setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }]) this.myRef.current.scrollTo(0, 0); <div ref={this.myRef}></div>adjunte la propiedad ref a un elemento superior dom
Las otras respuestas mostraron cómo puede desplazar el modal hacia la parte superior, y esa es la forma generalmente aceptada de lograr esto, sin embargo, quiero mostrarle cómo desplazar el "Mensaje" a la vista, independientemente de si está en la parte superior o no.
También necesitaría crear una ref a donde muestra su mensaje y usar la funcionalidad scrollIntoView para desplazar el modal a su mensaje de validación.
import React, { useRef } from 'react'; const Modal = () => { const validationMessageRef = useRef(); const setAddModalErrorMsg = () => { // scrolls the validation message into view, and the block: 'nearest' ensures it scrolls the modal and not the window validationMessageRef.current?.scrollIntoView({ block:'nearest' }); } return ( <div> <div ref={validationMessageRef}> // your validation message is displayed here </div> // rest of your modal content here </div> ) }