React中输入框仅输入一个字符即失焦的问题求助

问题原因 #

1. 组件重复创建：你把LoginIdsInput定义在了父组件内部，每次父组件状态更新（比如调用setUserData）时，这个子组件都会被重新定义，导致输入框被重新渲染并丢失焦点。
2. 状态更新的潜在问题：直接展开userData可能会遇到 stale state 问题，尤其是快速输入时，状态更新可能基于旧的userData值。
3. 初始状态为null：userData初始值是null，每次取值都要做三元判断，也容易引发不必要的渲染。

修复步骤 #

1. 将子组件移到父组件外部 #

把LoginIdsInput从父组件内部抽出来作为独立组件，通过props传递userData和handleInputChange：

// 独立定义子组件
const LoginIdsInput = ({ userData, handleInputChange }) => {
  return (
    <div className="settings-card">
      <label>Identifiant</label>
      <br />
      <br />
      
      <div className="input-group">
        <IconUser />
        <input
          className="socraft-input-ingroup"
          placeholder="Nom"
          type="text"
          name="firstname"
          value={userData?.firstname || ""}
          onChange={handleInputChange}
        />
      </div>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  // 初始化为空对象，避免null判断
  const [userData, setUserData] = useState({});

  // 使用函数式更新，确保拿到最新的state
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setUserData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  return <LoginIdsInput userData={userData} handleInputChange={handleInputChange} />;
};

2. 优化状态更新逻辑 #

用setUserData的函数式更新形式，确保每次更新都基于最新的状态，避免闭包导致的旧值问题。

3. 初始化状态为对象 #

把userData初始值从null改成{}，用可选链?.简化取值逻辑，减少不必要的渲染触发。

特殊场景处理 #

如果必须在父组件内部定义子组件（比如依赖父组件上下文），可以用useCallback包裹handleInputChange，并给LoginIdsInput加上memo优化，避免不必要的重渲染：

import { useState, useCallback, memo } from 'react';

const LoginIdsInput = memo(({ userData, handleInputChange }) => {
  return (
    // 组件内容保持不变
    <div className="settings-card">
      <label>Identifiant</label>
      <br />
      <br />
      
      <div className="input-group">
        <IconUser />
        <input
          className="socraft-input-ingroup"
          placeholder="Nom"
          type="text"
          name="firstname"
          value={userData?.firstname || ""}
          onChange={handleInputChange}
        />
      </div>
    </div>
  );
});

const ParentComponent = () => {
  const [userData, setUserData] = useState({});

  const handleInputChange = useCallback((e) => {
    const { name, value } = e.target;
    setUserData(prevState => ({
      ...prevState,
      [name]: value,
    }));
  }, []);

  return <LoginIdsInput userData={userData} handleInputChange={handleInputChange} />;
};

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