如何禁用不支持disabled属性的react-number-format输入框

react-number-format 会自动透传所有原生 input 的标准属性，组件本身不需要单独定义disabled配置项，直接给组件传原生 disabled 属性就能实现禁用效果，这是最推荐的做法：

import NumberFormat from 'react-number-format';

export default function Demo() {
  return (
    <NumberFormat
      value={12345}
      thousandSeparator
      prefix="¥"
      disabled // 直接传原生disabled属性即可
    />
  )
}

如果是使用4.x及更早的老版本，遇到属性透传异常的情况，可以用以下两种兜底方案：

• 传readOnly属性阻止输入，同时自定义样式对齐原生禁用的视觉表现：

<NumberFormat
  value={12345}
  thousandSeparator
  prefix="¥"
  readOnly={isDisabled}
  style={isDisabled ? {
    background: '#f5f5f5',
    cursor: 'not-allowed',
    color: 'rgba(0,0,0,.25)',
    borderColor: '#d9d9d9'
  } : undefined}
/>

• 如果你通过customInput配置项使用了自定义输入组件（比如Ant Design、MUI的Input组件），直接把disabled属性传给NumberFormat即可，属性会同步传给自定义输入组件，触发组件本身的禁用逻辑。

不要用拦截onKeyDown、阻止onChange执行的方式实现禁用，这类方案无法拦截右键粘贴、浏览器自动填充、辅助功能操作触发的输入修改，存在明显的逻辑漏洞。

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