如何在 React 中从另一个组件滚动到一个组件？

Question

我有一个表单，在提交时显示表单的结果，但更重要的是，滚动到显示结果的组件。我在尝试传递裁判和前锋裁判时陷入困境。我见过的所有演示都是同一文件中的组件。我的设置如下：

\n

它App.js包含两个组件\xe2\x80\x93 Form.js，用于提交表单并Results.js显示表单提交的结果。该Results.js组件位于页面的下方，因此我想在用户单击表单上的 Enter 后滚动到该组件。

\n

这是一个代码沙箱，演示了我的设置。

\n

这里是相同的代码：

\n

// App.js\nimport "./styles.css";\nimport Form from "./Form";\nimport Results from "./Results";\n\nexport default function App() {\n  return (\n    <>\n      <Form />\n      <Results />\n    </>\n  );\n}\n

\n

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

\n

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

\n

Answer 1

需要纠正的事情很少。

1. Results组件应该转发引用，而不是转发给Form组件。

import { forwardRef } from "react";

const Results = forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h1>Results</h1>
    </div>
  );
});

export default Results;

2. Form组件应该接收 ref 作为Resultsprop ( resultRef)。

import { useState } from "react";

const Form = ({ resultRef }) => {
  const [name, setName] = useState("");

  const onSubmit = (e) => {
    e.preventDefault();
    resultRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <form onSubmit={onSubmit} className="tall">
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

3. 根组件应该创建refusinguseRef并按如下方式使用它。请注意，Form正在使用resultRefwhileResults来实例化它。

import "./styles.css";
import Form from "./Form";
import Results from "./Results";
import { useRef } from "react";

export default function App() {
  const resultRef = useRef(null);

  return (
    <>
      <Form resultRef={resultRef} />
      <Results ref={resultRef} />
    </>
  );
}