为什么我不能使用 React refs 专注于某些元素？

Question

我有一个奇怪的案例，我有一个表单元素的引用列表，包括按钮、不同类型的输入等。然后我创建了一个错误摘要，当点击它时会自动聚焦，因此也会滚动到需要注意的元素。这对 input[type="text"] 和 textareas 非常有效，但是 input[type="file"] 和按钮（类型按钮）无法正常工作。然而，这是奇怪的部分，如果我点击上面的一个元素然后手动向下移动，将焦点放在该元素上。然后焦点功能再次开始工作。

我只是通过使用 imperativeHandle 调用公开的函数来获取所有引用。 refs 是这样创建的：const fileInput = createRef<HTMLInputElement>(); 并分配给输入元素。代码很简单，这是一个已知问题吗？

提前致谢。

编辑：尝试复制错误，并用这个简单的代码遇到同样的问题：

import React, { createRef } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const textRef = createRef<HTMLInputElement>();
  const textAreaRef = createRef<HTMLTextAreaElement>();
  const fileRef = createRef<HTMLInputElement>();
  const buttonRef = createRef<HTMLButtonElement>();
  return (
    <div className="App">
      <div>
        <input type="text" ref={textRef} />
      </div>
      <div>
        <textarea ref={textAreaRef} ></textarea>
      </div>
      <div>
        <input type="file" ref={fileRef}/>
      </div>
      <div>
        <button ref={buttonRef}>Button</button>
      </div>
      Links:
      <div>
        <button onClick={() => {
          textRef.current?.focus();
        }}>Text</button>
      </div>
      <div>
        <button onClick={() => {
          textAreaRef.current?.focus();
        }}>TextArea</button>
      </div>
      <div>
        <button onClick={() => {
          fileRef.current?.focus();
        }}>File</button>
      </div>
      <div>
        <button onClick={() => {
          buttonRef.current?.focus();
        }}>Button</button>
      </div>
    </div>
  );
}

export default App;

使用scrollTo时也有同样的问题。

编辑 2：尝试将 preventDefault 添加到 onclick 函数，但没有任何效果。使用键盘导航并使用 space 或 enter 按下项目似乎完美无缺，但在使用光标单击时却不是。

Answer 1

您的代码示例似乎可以正常工作。

当您单击焦点按钮时，焦点将移动到适当的输入。默认情况下，只有当用户代理通过试探法确定焦点应该在元素上变得明显时，才会显示“焦点环”。如果您使用键盘导航到对焦按钮并按 Enter，您将在 file 输入上看到“对焦环”。

您可以使用 :focus pseudo class to create style indicator that will be visible any time the target is focused. You should also read about the :focus-visible 伪 class，因为它可以帮助您了解默认情况下焦点指示器的工作方式。

您遇到 scrollTo 的问题是因为所有内容都可以显示在视图中而无需滚动。如果您为输入周围的每个 div 添加一些高度，使文档比浏览器上的视图长，调用 scrollTo 将滚动到正确的输入。

为什么我不能使用 React refs 专注于某些元素？

Why can't I focus on certain elements using react refs?

javascript

focus

refs

typescript

reactjs