React子组件Input onChange时失焦问题及解决方案求助

核心原因 #

每次切换activeTab时，对应表单组件被卸载后重新挂载，或父组件/弹窗组件不必要的重渲染导致Input组件实例重建，从而丢失焦点。

有效解决方案 #

1. 给切换的表单组件设置固定key #

React通过key判断组件实例是否复用，若key变化则会卸载旧组件、创建新组件。不要用activeTab作为表单的key，而是给每个表单分配固定唯一的key，确保切换Tab时组件实例被复用而非重建。

示例修改（MasterList组件中渲染表单的部分）：

// MasterList组件内
<ModalContainer isOpen={isModalOpen} onClose={handleCloseModal}>
  {activeTab === 'Designation' ? (
    <DesignationForm 
      key="designation-form"  {/* 固定key */}
      onSubmit={handleSubmitDesignation}
    />
  ) : (
    <OrganizationForm 
      key="organization-form"  {/* 固定key */}
      onSubmit={handleSubmitOrganization}
    />
  )}
</ModalContainer>

2. 阻止ModalContainer不必要的重渲染 #

用React.memo包裹ModalContainer，浅比较props，仅当props真正变化时才重渲染。同时，父组件传递给弹窗的回调函数要用useCallback缓存，避免每次父组件渲染生成新函数触发弹窗重渲染。

步骤1：优化ModalContainer

// ModalContainer.js
import React from 'react';

const ModalContainer = React.memo(({ isOpen, onClose, children }) => {
  return (
    <div className={`modal ${isOpen ? 'open' : ''}`}>
      <div className="modal-content">
        <button onClick={onClose}>关闭</button>
        {children}
      </div>
    </div>
  );
});

export default ModalContainer;

步骤2：父组件缓存回调函数

// MasterList组件内
import { useCallback, useState } from 'react';

const MasterList = () => {
  const [activeTab, setActiveTab] = useState('Designation');
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 用useCallback缓存提交回调
  const handleSubmitDesignation = useCallback((data) => {
    // 处理职称提交逻辑
    setIsModalOpen(false);
  }, []);

  const handleSubmitOrganization = useCallback((data) => {
    // 处理组织提交逻辑
    setIsModalOpen(false);
  }, []);

  const handleCloseModal = useCallback(() => {
    setIsModalOpen(false);
  }, []);

  // ...其他代码
};

3. 优化自定义Input组件 #

如果你的Input是自定义组件，同样用React.memo包裹，确保只有当props（如value、onChange等）真正变化时才重渲染：

// Input.js
import React from 'react';

const Input = React.memo(({ value, onChange, placeholder }) => {
  return (
    <input
      type="text"
      value={value}
      onChange={onChange}
      placeholder={placeholder}
    />
  );
});

export default Input;

验证逻辑 #

完成上述修改后，切换Tab时表单组件实例会被复用，弹窗和Input组件不会因为父组件无关重渲染而重建，输入时焦点就能保持稳定。

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