javascript - 如何从 React 中的另一个组件滚动到一个组件？

Question

我有一个表单，在提交时会显示表单的结果，但更重要的是，它会滚动到显示结果的组件。我一直在尝试传递引用和转发引用。我见过的所有演示都是同一文件中的组件。我的设置如下:

App.js 包含两个组件——提交表单的 Form.js 和显示表单结果的 Results.js提交。 Results.js 组件位于页面下方，因此我想在用户单击表单上的输入后滚动到该组件。

这是一个codesandbox这演示了我的设置。

这里是相同的代码:

// 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>
  );
}

Answer 1

需要纠正的地方不多。

1. Results 组件应该转发 ref，而不是 Form 组件。

import { forwardRef } from "react";

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

export default Results;

1. Form 组件应该接收对 Results 的引用作为 prop (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;

1. 根组件应使用 useRef 创建 ref 并按如下方式使用它。请注意，Form 使用 resultRef 而 Results 正在实例化它。

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} />
    </>
  );
}