删除列表项后如何让最后一个列表项自动获焦（autoFocus）？

核心思路 #

删除列表项后，剩余输入框组件已完成挂载，autoFocus仅在组件首次挂载时生效，因此需要手动触发最后一个输入框的聚焦操作。

具体实现方案 #

1. 存储输入框的Ref集合

在组件中创建Ref数组，保存每个输入框的DOM引用：

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

function App() {
  const [items, setItems] = useState(['Item 1']);
  const inputRefs = useRef([]); // 存储所有输入框的ref
  // ...
}

2. 绑定Ref到每个输入框

渲染列表时，将每个输入框的DOM元素存入Ref数组：

{items.map((item, index) => (
  <div key={index}>
    <input
      ref={el => inputRefs.current[index] = el}
      value={item}
      onChange={(e) => {
        const newItems = [...items];
        newItems[index] = e.target.value;
        setItems(newItems);
      }}
    />
    <button onClick={() => handleDelete(index)}>删除</button>
  </div>
))}

3. 监听列表变化触发聚焦

用useEffect监听items状态变化，列表更新且有剩余项时，让最后一个输入框获焦：

useEffect(() => {
  if (items.length > 0) {
    const lastInput = inputRefs.current[items.length - 1];
    lastInput?.focus();
  }
}, [items]);

4. 删除函数实现

保持删除逻辑简洁，状态更新后由useEffect自动处理聚焦：

const handleDelete = (index) => {
  const newItems = items.filter((_, i) => i !== index);
  setItems(newItems);
};

方案优势 #

• 借助useEffect监听状态变化，避免异步更新导致的DOM获取问题，确保DOM更新完成后再执行聚焦。
• Ref数组可精准定位每个输入框，操作稳定性更高。

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