如何修复React登录页面输入文本框的失焦问题？

问题分析 #

你的输入框失焦由两个核心问题导致：

• InputText组件同时维护内部state和接收外部value prop，状态不同步引发组件异常重渲染
• 若Section/Container等组件定义在Login组件内部，每次Login重渲染时这些组件会被重新定义，React会卸载原有组件并挂载新组件，直接导致输入框失焦

解决方案 #

1. 修复InputText为纯受控组件 #

去掉InputText内部的text state，完全依赖父组件传入的value和onChange控制输入值，避免状态冗余：

const InputText = ({ value = "", type = "text", onChange }) => {
  const handleChange = (event) => {
    if (typeof onChange === "function") {
      onChange(event);
    }
  };

  return <input value={value} type={type} onChange={handleChange} />;
};

如果需要优化性能，可用useCallback包裹handleChange：

import { useCallback } from 'react';

const InputText = ({ value = "", type = "text", onChange }) => {
  const handleChange = useCallback((event) => {
    if (typeof onChange === "function") {
      onChange(event);
    }
  }, [onChange]);

  return <input value={value} type={type} onChange={handleChange} />;
};

2. 确保组件定义在父组件外部 #

如果Section、Container、InputText这些组件是写在Login函数内部的，必须将它们移到Login组件外部（比如单独的组件文件）。每次父组件重渲染时，内部定义的组件会被重新创建，React会认为是全新的组件类型，从而卸载原有DOM节点并重建，输入框自然会失焦。

修正后的Login组件示例（组件均在外部定义）：

import { useState } from 'react';
import Section from './Section';
import Container from './Container';
import FormLayout from './FormLayout';
import InputText from './InputText';

export default function Login() {
  const [mail, setMail] = useState('');
  const handleMailChange = (e) => {
    setMail(e.target.value);
  };

  return (
    <Section className="someClassName">
      <Container size="l" wrapper={true}>
        <section className="someClassName">
          <Container size="s" className="someClassName">
            <FormLayout arg1="" arg2="">
              <InputText
                type="email"
                value={mail}
                onChange={handleMailChange}
              />
            </FormLayout>
          </Container>
        </section>
      </Container>
    </Section>
  );
}

额外优化（可选） #

用React.memo包裹纯组件（Section、Container、InputText这类无内部state的组件），避免父组件重渲染时它们无意义地跟着重渲染：

import { memo, useCallback } from 'react';

const Section = memo(({ className = "", children }) => {
  return <div className={className}>{children}</div>;
});

const Container = memo(({ size='', wrapper=false, className, children }) => {
  return <div className={className}>{children}</div>;
});

const InputText = memo(({ value = "", type = "text", onChange }) => {
  const handleChange = useCallback((event) => {
    if (typeof onChange === "function") {
      onChange(event);
    }
  }, [onChange]);

  return <input value={value} type={type} onChange={handleChange} />;
});

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