自定义TextField清空内容后为何重置为默认值？

嘿，我之前也踩过类似的坑，结合你用到的这些库来看，问题主要出在NumericFormat的空值处理逻辑和react-hook-form的useController默认值回退机制上，咱们一步步来修复：

问题根源拆解 #

1. NumericFormat的默认行为：当你清空输入框时，它不会返回空字符串，反而会自动填充格式化后的默认值（比如$0.00），这会让表单误以为用户主动输入了0。
2. useController的回退逻辑：如果字段值变成undefined，useController会自动用defaultValue覆盖，导致你刚清空输入框，值就立刻跳回初始默认值。

具体解决方案 #

我们需要调整两个核心点：让NumericFormat正确识别空输入，同时告诉react-hook-form接受空值状态，而非强制回退到默认值。修改你的FormCurrencyField组件如下：

import { TextField } from '@mui/material';
import { NumericFormat } from 'react-number-format';
import { useController, ControllerProps } from 'react-hook-form';

type FormCurrencyFieldProps = Omit<ControllerProps, 'render'> & {
  label: string;
};

export const FormCurrencyField = ({ 
  name, 
  label, 
  control, 
  defaultValue = 0, 
  ...rest 
}: FormCurrencyFieldProps) => {
  const { field, fieldState } = useController({
    name,
    control,
    defaultValue,
  });

  return (
    <NumericFormat
      customInput={TextField}
      label={label}
      // 当表单值为null/undefined时，输入框显示空字符串
      value={field.value ?? ''}
      onValueChange={({ value, formattedValue }) => {
        // 捕获用户清空操作，将表单值设为null（避免触发defaultValue回退）
        const inputValue = formattedValue === '' ? null : Number(value);
        field.onChange(inputValue);
      }}
      // 关键配置：允许空值格式化，清空时返回空字符串而非默认的0.00
      allowEmptyFormatting={true}
      thousandSeparator=","
      prefix="$"
      decimalScale={2}
      fixedDecimalScale
      error={!!fieldState.error}
      helperText={fieldState.error?.message}
      {...rest}
    />
  );
};

关键改动说明 #

• allowEmptyFormatting={true}：强制NumericFormat在用户清空输入时返回空字符串，而不是自动生成$0.00这类格式化默认值，这样我们能准确捕捉到用户的清空意图。
• 空值转null：在onValueChange回调里，把空字符串转换成null传给表单字段。react-hook-form不会把null判定为"未设置状态"，因此不会触发defaultValue的回退逻辑，表单状态会保持为null，输入框也会显示为空。
• value={field.value ?? ''}：确保当表单值为null时，输入框显示空内容，而不是默认的0。

调整后，你清空输入框时，组件就不会再自动恢复到默认值了，表单状态也会正确记录空值状态。

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