React.js中InputArea函数渲染输入框单次输入失焦问题求解

问题本质 #

你遇到的问题核心是：InputArea函数被定义在父组件的渲染逻辑内部，每次父组件因状态更新（比如输入内容变化触发setState）重新渲染时，都会创建一个全新的InputArea函数。React会将这个新函数识别为完全不同的组件，随即卸载旧输入框并挂载新输入框，导致焦点丢失。

可行解决方案 #

方案1：将InputArea提取到父组件作用域外部 #

把InputArea定义为独立的函数组件，脱离父组件的渲染周期，确保它不会随父组件渲染被重复创建：

// 独立定义InputArea组件
function InputArea({ value, onChange }) {
  return <input type="text" value={value} onChange={onChange} />;
}

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <InputArea value={inputValue} onChange={handleChange} />
    </div>
  );
}

方案2：用useMemo缓存内部定义的InputArea #

如果必须将InputArea留在父组件内部，使用useMemo缓存该函数，保证每次父组件渲染时返回同一个函数引用：

import { useState, useMemo } from 'react';

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');
  
  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  // 用useMemo缓存InputArea，依赖项为空数组确保仅创建一次
  const InputArea = useMemo(() => {
    return ({ value, onChange }) => {
      return <input type="text" value={value} onChange={onChange} />;
    };
  }, []);

  return (
    <div>
      <InputArea value={inputValue} onChange={handleChange} />
    </div>
  );
}

补充说明 #

直接在return中编写输入框代码时，React只会更新输入框的value属性，不会触发组件的卸载-重建流程，因此不会出现失焦问题。而内部动态创建的InputArea函数会被React判定为新组件，才会引发焦点丢失的问题。

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