如何移除MUI TextField的默认值，输入新内容时不展示原有默认值

现有代码问题 #

• 混用受控/非受控组件属性：你已声明关联状态valueTextField，但给TextField传的是仅首次渲染生效的defaultValue属性，后续状态变更无法同步到输入框，是默认值无法清除的核心原因。
• 类型不匹配：你给状态声明的类型是number，但清空逻辑里赋值为空字符串，会触发TypeScript类型报错。
• 方法名笔误：你定义的清空函数名为rest，大概率是reset的拼写错误。

修正后实现 #

把TextField改为受控组件，调整状态类型兼容空输入，优化聚焦清空逻辑避免误删用户已输入内容：

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

// 状态支持数值和空字符串，适配空输入场景
const [valueTextField, setTextField] = useState<number | string>(0);

const handleFocus = () => {
  // 仅当前值为默认0时清空，不影响用户已输入的内容
  if (valueTextField === 0) {
    setTextField('');
  }
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const inputVal = e.target.value;
  // 仅允许空值和合法数值输入，可按需调整校验规则
  if (inputVal === '' || !isNaN(Number(inputVal))) {
    setTextField(inputVal);
  }
};

// 用value属性绑定状态，实现受控更新
<TextField
  label={'Time'}
  value={valueTextField}
  variant='standard'
  name='time'
  onChange={handleChange}
  onFocus={handleFocus}
/>

如果需要最终提交时取数值类型，可在提交逻辑中加一层转换：const submitValue = Number(valueTextField) || 0。

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