React模态框内Input失焦且重复渲染状态问题求助

问题核心原因 #

每次输入字符触发状态更新时，createTerminalsModal函数会被重新调用，返回一个全新的Modal组件实例。React会将之前的模态框及内部输入框完全卸载，再重新挂载新的实例，导致输入框失去焦点。

具体修复步骤 #

1. 将模态框逻辑封装为独立组件 #

把原来的createTerminalsModal函数改成React组件，这样React会在重渲染时复用组件实例，而非创建新实例：

import { useState } from 'react';
import { NonGlobalModal } from './path-to-your-modal-component'; // 替换为实际组件路径
import Input from './path-to-your-input-component'; // 替换为实际组件路径

const TerminalsModal = ({ closeModal }) => {
  const [values, setValues] = useState({ displayName: "", pairingCode: "" });

  // 修复参数缺失问题，改用函数式更新避免闭包陷阱
  const handleInput = (e) => {
    const { name, value } = e.target;
    setValues(prevState => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <NonGlobalModal
      modalHeader={<h2>Create New Terminal</h2>}
      hideButtons={false}
      buttonContent="Save"
      closeModal={closeModal}
    >
      <>
        <label htmlFor="displayName">Terminal Display Name</label>
        <Input
          style={{ marginTop: "10px", marginBottom: "25px" }}
          name="displayName"
          value={values.displayName} // 改为受控组件绑定状态
          onChange={handleInput}
        />
        <label htmlFor="pairingCode">Pairing Code</label>
        <Input
          style={{ marginTop: "10px" }}
          value={values.pairingCode} // 改为受控组件绑定状态
          type="text"
          name="pairingCode"
          onChange={handleInput}
        />
      </>
    </NonGlobalModal>
  );
};

export default TerminalsModal;

2. 在父组件中直接使用该组件 #

替换原来的函数调用方式，直接渲染组件：

// 导入封装好的组件
import TerminalsModal from './path-to-terminals-modal';

// 父组件JSX部分
return !terminals?.findManyStripeTerminalLocation.length ? (
  // 无终端时的原有内容
) : (
  <div>
    {/* 直接渲染组件，而非调用函数 */}
    {show && <TerminalsModal closeModal={setShow} />}
    <h1>Terminals for {clinicName}</h1>
    {/* 其他原有内容 */}
  </div>
);

3. 关键优化说明 #

• 受控组件改造：将defaultValue改为value绑定状态，确保输入框值与状态实时同步，避免非受控组件的状态不一致问题。
• 函数式状态更新：使用setValues(prevState => ...)获取最新状态，避免闭包导致的旧状态引用问题。
• 组件化复用：独立组件在重渲染时会被React复用实例，不会触发卸载/挂载流程，彻底解决输入框失焦问题。

为什么之前的尝试无效？ #

• 给Input加key：由于整个Modal是新创建的实例，内部Input的key无法阻止组件卸载，因此无效。
• 直接写入JSX：若未将模态框封装为独立组件，父组件状态更新时，模态框内的元素仍会随父组件重渲染被重新创建，导致失焦。

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