使用容器上的 onMouseDown 关注内部输入

Question

我有一个包含在包装器 div 中的输入。在包装器上按下鼠标，我希望内部输入成为焦点。

import "./styles.css";
import { useRef } from "react";

export default () => {
  const ref = useRef(null);

  return (
    <div className="App">
      <div
        className="Wrapper"
        onMouseDown={(e) => {
          ref.current.focus();
          // e.preventDefault();
        }}
      >
        <input ref={ref} />
      </div>
    </div>
  );
};

但是，焦点不起作用，除非我包括

e.preventDefault()

。但是这种方法的问题是它禁用了输入上的文本高亮显示，这似乎是鼠标按下的默认行为，所以这是不可取的。另一方面，如果我使用

onClick

而不是

onMouseDown

，即使不阻止默认它也能正常工作，但我想专注于

onMouseDown

.

为什么会发生这种情况，解决它的最佳方法是什么？

现场演示

Answer 1

发生这种情况是因为一旦您单击容器，就会触发回调。并且输入被聚焦，但随后默认处理程序执行并模糊输入。现在，一种方法是使用 setTimeout - 延迟

focus()

调用。因此， element.focus() 在浏览器的默认处理程序执行后运行。

    (e) => {
        setTimeout(()=>ref.current.focus(), 100)
    }

如果您的处理程序运行繁重的计算，那么您可能希望增加延迟或将

focus()

调用移动到计算完成后运行的其他地方。