React调和：数组与兄弟元素共存致输入框失焦问题

我之前也遇到过这种让人挠头的问题！你已经排查了最常见的几个坑——正确设置了key、没在render里动态生成组件，但还是碰到了输入框失焦的情况，而且问题出在list.map(...)渲染列表的同级输入框上，这确实是个容易被忽略的场景。

问题根源分析 #

React的Diff算法在比对DOM树时，会优先根据元素类型和key来判断是否复用现有组件/元素。当你的列表（list.map(...)部分）更新时，父组件会触发重新渲染。此时，虽然同级的输入框本身没有变化，但React可能会将整个父容器下的元素重新评估——如果输入框没有独立的标识（比如稳定的key），或者没有被封装成独立组件，React可能会错误地卸载并重新创建这个输入框，导致焦点丢失。

可行的解决方案 #

方案1：将同级输入框封装为独立组件

把输入框提取成一个拥有独立生命周期的组件，这样只要它的props没有变化，React就不会重新渲染它，自然不会丢失焦点：

// 独立的输入框组件
const PersistentInput = ({ value, onValueChange }) => {
  return (
    <input
      value={value}
      onChange={(e) => onValueChange(e.target.value)}
    />
  );
};

// 父组件中使用
function ParentComponent() {
  const [list, setList] = useState([]);
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      {/* 列表渲染部分 */}
      {list.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
      {/* 使用独立组件的输入框 */}
      <PersistentInput 
        value={inputValue} 
        onValueChange={setInputValue} 
      />
    </div>
  );
}

方案2：给输入框添加稳定独立的key

给同级输入框设置一个固定不变的key，确保React在Diff时能识别出这是同一个元素，不会重新创建：

function ParentComponent() {
  const [list, setList] = useState([]);
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      {list.map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
      {/* 添加固定key的输入框 */}
      <input
        key="persistent-search-input"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </div>
  );
}

验证方法 #

你可以通过React DevTools来确认问题：当列表更新时，观察输入框组件是否被标记为“重新挂载”（而非“更新”）。如果是前者，就说明React确实在重新创建这个输入框，用上面的方法就能解决。

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