在反應中滾動到可滾動div的底部

Question

我嘗試了許多解決方案來嘗試滾動到 div 的底部，因為在底部可以找到關於他們的注冊表單是否成功提交的用戶反饋。

var objDiv = document.getElementById("form");
objDiv.scrollTop = objDiv.scrollHeight;

和

window.scrollTo(0,document.body.scrollHeight);

和

window.scrollTo(0,document.querySelector("#form").scrollHeight);

沒有成功

這是表單的反應代碼

return (
    <div
      className={styles.register_container}
      id="register-container"
      style={{
        height: "100%",
        overflow: "scroll",
      }}
    >
      <HomeIcon />
      <div className={styles.login_button_container}>
        <p>Already have an account? </p>
        <button
          onClick={() => {
            router.push("/login");
          }}
        >
          Log in
        </button>
      </div>
      <div
        style={{
          padding: "60px 0",
          height: "100%",
          maxWidth: "300px",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
        id="form"
      >
        <img
          src="/assets/Logo/ROA_logowhite.png"
          style={{
            height: "100px",
            maxWidth: "100px",
          }}
          onClick={() => {
            var objDiv = document.getElementById("form");
            objDiv.scrollTop = objDiv.scrollHeight;
          }}
        />
        {page === 2 && (
          <div style={{ width: "100%" }}>
            <button className="back-button" onClick={backButtonHandler}>
              <FontAwesomeIcon icon={faAngleLeft} />
              Back
            </button>
          </div>
        )}
        {page === 1 && loginDetails}
        {page === 2 && personalDetails}

        <div style={{ width: "100%", padding: "5px 0" }}>
          <button
            className="form-button"
            onClick={buttonHandler}
            style={{ minHeight: "50px" }}
          >
            {submitButton}
          </button>
        </div>
        {loading && (
          <div
            style={{
              padding: "5px",
              width: "100%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <ReactLoading
              type="spin"
              color="#1dd760"
              height={50}
              width={50}
              id="loader"
            />
          </div>
        )}

        {registrationError && (
          <p className="form-submit-error">
            Registration error, refresh your page and try again
          </p>
        )}
        {true && (
          <div>
            <p
              style={{ marginBottom: "10px" }}
              className="form-submit"
              id="submit"
            >
              Redirecting to login ... You should receive a welcome email, if
              not please try registering again or visit the{" "}
              <a href="/contact" style={{ color: "#1dd760" }}>
                contact
              </a>{" "}
              page.
            </p>
          </div>
        )}
      </div>
    </div>
  );

我不能直接關注提交成功消息，因為 setState 在反應中是異步的。 只需要一個 function 允許我在單擊下一步/提交按鈕時滾動 div 的底部

Answer 1

在 React function 組件中訪問/修改 DOM 元素的正確方法是使用useRef掛鈎。 https://reactjs.org/docs/hooks-reference.html#useref

這是一個如何解決問題的示例：

import * as React from "react";

const Component: React.FunctionComponent = () => {
  const ref = React.useRef<HTMLDivElement>(null);
  const [success, updateSuccess] = React.useState(false);

  const buttonHandler = () => {
    updateSuccess(true);
    if (ref.current) {
      const offsetBottom = ref.current.offsetTop + ref.current.offsetHeight;
      window.scrollTo({ top: offsetBottom });
    }
  };

  return (
    <div>
    ...
      <button onClick={buttonHandler}>Scroll</button>
      {success ? (
        <div
          ref={ref}
          style={{ height: "2000px", display: !success && "none" }}
        >
          Long Success Message
        </div>
      ) : null}
    </div>
  );
};

export default Component;