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

Question

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

我只是通过使用命令句柄调用暴露的 function 来获取所有参考。 参考是这样创建的： 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 函数，但没有任何效果。 使用键盘导航并使用空格或 Enter 按下项目似乎完美无缺，但在使用 cursor 进行单击时却不行。

Answer 1

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

当您单击焦点按钮时，焦点将移至相应的输入。 默认情况下，仅当用户代理通过启发式方法确定焦点应该在元素上明显时才会显示“焦点环”。 如果您使用键盘导航到焦点按钮并按 Enter，您将在file输入上获得“焦点环”。

您可以使用:focus伪 class 创建样式指示器，该指示器在目标聚焦时可见。 您还应该阅读:focus-visible伪 class 因为它可以帮助您了解默认情况下焦点指示器的工作方式。

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