反应模态滚动到顶部

Question

我的 React 应用程序中有一个长格式的模态框。因此，当我提交表单时，我会在表单顶部显示来自服务器的验证消息。所以用户必须滚动到顶部才能查看消息。所以我想在消息出现时自动滚动到顶部。所以我在提交处理函数中添加了以下代码。但它不起作用。

setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }])
                    window.scrollTo({
                        top: 0,
                        left: 0,
                        behavior: "smooth"
                      });

Answer 1

您正在尝试滚动 window，但您的 window 可能已经在顶部，需要向上滚动的是您的模态元素。

为此，我将创建一个对模态元素的引用，然后在您的函数中通过引用滚动模态元素，所以类似于：

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>
  )

}

Answer 2

要自动滚动到顶部，我们可以使用以下代码：

  constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
    }

在setAddModalErrorMsg后添加scrollTo函数

 setAddModalErrorMsg([{ msg: res.data.msg, type: "error" }])
    this.myRef.current.scrollTo(0, 0);

 <div ref={this.myRef}></div>

将 ref 属性附加到顶部 dom 元素

Answer 3

其他答案显示了如何将模式滚动到顶部，这是实现此目的的普遍接受的方法，不过，我想向您展示如何将“消息”滚动到视图中，无论是否上不上。

您还需要创建一个 ref 到您显示消息的位置，并使用 scrollIntoView 功能将模式滚动到您的验证消息。

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>

  )
}

反应模态滚动到顶部

React modal scroll to top

javascript

scroll

bootstrap-modal

reactjs