ReactJS中useState更新值时输入框失焦问题求助

问题根源 #

你把MyLittleInput组件定义在了App组件内部，每次App因useState更新触发重渲染时，MyLittleInput都会被重新定义为全新的组件类型。React会卸载旧的组件实例并重新挂载新实例，直接导致输入框失去焦点。

修复方案 #

将MyLittleInput组件移到App组件外部定义，确保组件类型在重渲染时保持稳定，同时通过props传递所需的回调函数：

import { useState } from "react";

// 组件移至App外部，避免每次重渲染被重新创建
const MyLittleInput = ({ onChange }) => {
  return <input onChange={onChange} />;
};

export default function App() {
  const [hasInputChanged, setHasInputChanged] = useState(false);
  const colorList = ["orange", "blue", "yellow"];

  function handleChange(e) {
    setHasInputChanged(true);
  }

  return (
    <>
      {colorList.map((color) => (
        <MyLittleInput key={color} onChange={handleChange} />
      ))}
    </>
  );
}

补充说明 #

你之前尝试的key属性是正确的，但因为组件被反复重新定义，React无法识别这是同一个组件，所以key的作用被抵消。调整组件定义位置后，React会仅更新组件的props而非卸载重建，输入框就能保持焦点状态。

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