如何滚动到 React 中的焦点元素之外

Question

我正在开发 React 应用程序，并使用 antd 作为 UI-library。我打算做的是，每当单击名为 Open Modal 的按钮时，都会打开一个模式，当用户单击模式中的 Ok 按钮时，将显示一个输入字段并且页面应自动滚动到顶部。但是，由于输入字段包含焦点，滚动只会发生在输入字段变得可见之前。有什么方法可以使页面滚动到顶部，而忽略仅使用 JS 的焦点元素。这是重现示例的最少代码：

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isInputVisible, setIsInputVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsInputVisible(true);
    window.scroll(0, 0);
  };

  const handleCancel = () => {
    setIsInputVisible(false);
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        /*Some contents...*/
        {isInputVisible && <input autoFocus />}
        /*Some contents...*/
      </Modal>
    </>
  );
};

这是用于重现用例的沙箱 link。 Code Sandbox

Answer 1

您可以随时使用 scrollIntoView 方法。

scrollIntoView

我尝试使用 ref 和 useRef 但它没有用，所以另一个解决方案是通过它的 class 名称找到模态并使用上述方法。

检查这个 sandbox

Answer 2

我不确定它是否有效，但我认为您可以使用 useRef 挂钩来完成，您可以在单击事件后将焦点放在该挂钩上。 Refer this

如何滚动到 React 中的焦点元素之外

How to scroll beyond the focused element in React

html

javascript

scroll

reactjs

antd