非受控TextField重渲染后输入值重置为默认值的技术问题求助

你碰到的问题本质上是对非受控组件的行为理解有误——非受控TextField的defaultValue仅在首次挂载时生效，正常重渲染不会重置用户输入的内容。如果出现输入值被重置的情况，要么是组件被意外重新挂载（比如key变化、条件渲染导致组件销毁重建），要么是校验逻辑的写法可以优化。下面给出具体解决思路：

一、排查组件是否被重新挂载 #

先检查你的TextField是否处于以下场景：

• 父组件给它设置的key属性动态变化
• 被包裹在条件渲染逻辑里（比如{isShow && <TextField />}），每次状态变更时组件被销毁后重新创建

如果存在这些情况，修正后defaultValue就只会在第一次加载时赋值，后续重渲染不会影响用户输入。

二、优化非受控组件的校验逻辑 #

如果想保留非受控特性，可以直接通过ref获取输入框的值，简化校验逻辑：

import { TextField } from '@mui/material';
import { useRef, useState } from 'react';

// 示例校验函数，替换成你自己的emailHasError
const emailHasError = (email) => {
  return !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

const EmailInput = () => {
  const emailInputRef = useRef();
  const [emailError, setEmailError] = useState(false);

  const checkEmail = () => {
    const inputValue = emailInputRef.current.value.trim();
    setEmailError(emailHasError(inputValue));
  };

  return (
    <TextField
      autoFocus
      label="Email address"
      variant="outlined"
      fullWidth
      error={emailError}
      inputRef={emailInputRef}
      defaultValue='test@email.com'
      onKeyUp={checkEmail}
      onBlur={checkEmail}
    />
  );
};

export default EmailInput;

三、改用受控组件（更推荐） #

如果需要更稳定的表单控制，改用受控组件是更可靠的方案，彻底规避非受控组件的潜在问题：

import { TextField } from '@mui/material';
import { useState } from 'react';

const emailHasError = (email) => {
  return !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

const EmailInput = () => {
  const [emailValue, setEmailValue] = useState('test@email.com');
  const [emailError, setEmailError] = useState(false);

  const checkEmail = () => {
    setEmailError(emailHasError(emailValue.trim()));
  };

  return (
    <TextField
      autoFocus
      label="Email address"
      variant="outlined"
      fullWidth
      error={emailError}
      value={emailValue}
      onChange={(e) => setEmailValue(e.target.value)}
      onKeyUp={checkEmail}
      onBlur={checkEmail}
    />
  );
};

export default EmailInput;

核心要点 #

• 非受控组件的输入值由DOM自身维护，正常重渲染不会重置，若出现重置一定是组件被重新挂载了。
• 受控组件通过React状态管理输入值，行为更可预测，适合需要实时校验、表单联动的场景。

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