React中修改Input默认值状态后输入框失焦问题解决

问题说明 #

在开发的React应用中，通过Dialog.tsx统一生成的输入框，出现每输入一个字符就失去焦点的问题。根本原因是输入时调用setDocumentName更新了documentName状态，而该状态被作为input的defaultValue，同时input的key由defaultValue拼接生成——每次输入内容变化，key就跟着改变，React会判定这是一个新组件，销毁旧输入框并创建新的，最终导致焦点丢失。

相关代码 #

App.tsx #

import { useState } from "react";
import "./App.css";
import * as React from "react";
import { Dialog } from "./Components/Dialog";

function App() {
  const [documentName, setDocumentName] = useState("");

  return (
    <>
      <Dialog
        id="documentName"
        defaultValue={documentName}
        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
          setDocumentName(event.target.value);
        }}
      />
    </>
  );
}

export default App;

Dialog.tsx #

import * as React from "react";

export interface DialogProps {
  id: string;
  defaultValue?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export const Dialog: React.FC<DialogProps> = ({
  id,
  defaultValue,
  onChange,
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (onChange) {
      onChange(event);
    }
  };

  return (
    <>
      <input
        key={defaultValue + "-input"}
        id={id}
        defaultValue={defaultValue}
        onChange={handleChange}
      />
    </>
  );
};

解决方案 #

不再将defaultValue作为key的一部分，改为给Dialog组件传入一个固定的keyValue属性，将其赋值给input的key，确保组件不会因为输入内容变化而被重新创建。

修改后的代码 #

更新Dialog组件的Props定义与实现

import * as React from "react";

export interface DialogProps {
  id: string;
  defaultValue?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  keyValue: string; // 新增固定key属性
}

export const Dialog: React.FC<DialogProps> = ({
  id,
  defaultValue,
  onChange,
  keyValue, // 接收传入的固定key
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (onChange) {
      onChange(event);
    }
  };

  return (
    <>
      <input
        key={keyValue} // 使用固定的key值
        id={id}
        defaultValue={defaultValue}
        onChange={handleChange}
      />
    </>
  );
};

在App组件中传入固定的keyValue

import { useState } from "react";
import "./App.css";
import * as React from "react";
import { Dialog } from "./Components/Dialog";

function App() {
  const [documentName, setDocumentName] = useState("");

  return (
    <>
      <Dialog
        id="documentName"
        defaultValue={documentName}
        keyValue="document-name-input" // 传入固定不变的key值
        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
          setDocumentName(event.target.value);
        }}
      />
    </>
  );
}

export default App;

修改后，输入框的key保持固定，React不会频繁销毁重建组件，输入时就不会再出现焦点丢失的问题。

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