react-number-format结合MUI TextField：输入长度限制失效求助

问题原因 #

react-number-format的NumericFormat组件内部会自主处理输入格式化逻辑，原生onChange事件的拦截操作（比如preventDefault）无法阻止它更新输入框显示值。因为组件并非完全依赖外部state驱动渲染，单纯不更新state无法约束其内部行为。

解决方案 #

核心思路是利用组件提供的onValueChange回调替代原生onChange，通过受控值严格绑定state来限制输入：

• 使用onValueChange获取格式化后的输入值（或原始数字值）
• 判断值的长度是否超过限制，仅在符合条件时更新state
• 超出长度时仅提示错误，不更新state，组件会自动渲染之前的有效值

修改后的代码示例 #

<FormControl className='idea-edit-form__field' fullWidth>
  <NumericFormat
    fullWidth
    label='Сумма экономического эффекта'
    placeholder='Укажите общую сумму предполагаемого экономического эффекта'
    id='economicEffectSum'
    value={formFields.economicEffectSum}
    customInput={TextField}
    thousandSeparator={' '}
    onValueChange={(values) => {
      // 判断格式化后的显示值长度（包含千分位空格）
      const formattedValue = values.formattedValue;
      if (formattedValue.length <= 20) {
        // 仅在符合长度限制时更新表单状态
        onChangeInput({ target: { value: formattedValue } });
        setEconomicSumError('');
      } else {
        setEconomicSumError('Максимальное количество символов - 20');
      }
    }}
    InputLabelProps={{ shrink: true }}
    InputProps={{
      endAdornment: <InputAdornment position='end'>руб.</InputAdornment>,
    }}
    error={!!economicSumError?.length}
    helperText={economicSumError}
  />
</FormControl>

额外说明 #

• 如果需要限制的是纯数字位数（不含千分位分隔符），可以改用values.value（原始数字字符串）判断长度：

  const rawValue = values.value;
  if (rawValue.length <= 20) { ... }
  

• 移除了无效的inputProps配置（min/max是数字范围限制，不是字符长度限制）
• 无需使用event.stopPropagation()或event.preventDefault()，受控值机制会自动约束输入框内容

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