Tengo un formulario que, al enviarlo, muestra los resultados del formulario, pero lo que es más importante, se desplaza a un componente que muestra los resultados. Estoy atascado tratando de pasar árbitros y adelantar árbitros. Todas las demostraciones que he visto han sido de componentes en el mismo archivo. Mi configuración es la siguiente:

App.js contiene dos componentes Form.js , que envía el formulario, y Results.js , que muestra los resultados del envío del formulario. El componente Results.js está más abajo en la página, así que quiero desplazarme a ese componente una vez que el usuario haga clic en Entrar en el formulario.

Aquí hay uncodesandbox que demuestra mi configuración.

Aquí está el mismo código aquí:

 // App.js import "./styles.css"; import Form from "./Form"; import Results from "./Results"; export default function App() { return ( <> <Form /> <Results /> </> ); }

 // Form.js import { forwardRef, useState } from "react"; const Form = forwardRef(({ onScroll }, ref) => { const [name, setName] = useState(""); const onSubmit = (e) => { e.preventDefault(); onScroll(); }; return ( <form onSubmit={onSubmit} className="tall"> <input value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit">Submit</button> </form> ); }); export default Form;

 // Results.js import { useRef } from "react"; export default function Results() { const resultsRef = useRef(); function handleScrollToResults() { resultsRef.current.scrollIntoView({ behavior: "smooth" }); } return ( <div onScroll={handleScrollToResults}> <h1>Results</h1> </div> ); }