React如何锁定输入框焦点至手动移开？

问题原因 #

调用setValue("")会触发组件重新渲染，你在handleAdd中直接调用focus()是在状态更新前的DOM上操作，组件重新渲染后这个焦点操作会被覆盖，最终导致焦点落到body元素上。

解决方案 #

1. 用useEffect监听value变化，清空后再聚焦 #

利用React的useEffect钩子，在value被清空且组件重新渲染完成后执行聚焦操作，此时DOM是最新的，能稳定生效：

import { useEffect, useRef, useState } from 'react';

function ItemAdder() {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  const handleAdd = () => {
    if (!value) return;
    // 执行添加条目的逻辑，比如将value存入列表
    // ...

    setValue('');
  };

  // 当value变为空时，聚焦输入框
  useEffect(() => {
    if (!value && inputRef.current) {
      inputRef.current.focus();
    }
  }, [value]);

  return (
    <div>
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
      />
      {/* 这里渲染你的条目列表 */}
    </div>
  );
}

2. 阻止form的默认提交行为（如果输入框在form内） #

如果input被包裹在<form>标签中，回车会触发form的默认提交，导致页面刷新，这也是焦点丢失的常见原因。需要阻止这个默认行为：

// 方式一：在回车事件中阻止默认
<input
  ...
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleAdd();
    }
  }}
/>

// 方式二：给form绑定onSubmit事件并阻止默认
<form onSubmit={(e) => {
  e.preventDefault();
  handleAdd();
}}>
  <input ... />
</form>

3. 确认ref正确绑定 #

确保input元素正确绑定了ref={inputRef}，没有拼写错误或者遗漏，否则inputRef.current会是null，无法执行聚焦操作。

内容的提问来源于stack exchange，提问作者CSSer