react-input-mask自定义输入时onChange事件不生效如何解决

问题根因 #

• 自定义渲染输入框时，未将InputMask通过render props回调下发的属性透传到原生<input>元素上：外层绑定的onChange、掩码逻辑相关的监听和属性都封装在回调参数props中，不透传的话事件根本不会挂载到实际可交互的输入框上，自然无法触发。
• 代码中给组件设置了disabled={true}：禁用状态下的输入框无法接收用户输入操作，本身就不会触发值变更事件。

正确写法 #

必须全量展开透传回调参数中的props到内部input，不需要禁用输入时移除disabled配置即可：

<InputMask
  onChange={(e) => console.log(e.target.value)}
  // 无禁用需求直接删除disabled属性即可
  disabled={false}
>
  {(props) => {
     // 全量透传InputMask下发的属性到原生输入框
     return <input type="text" {...props} />;
  }}
</InputMask>

注意：不要手动给内部原生input单独绑定onChange、value等属性，会覆盖InputMask封装的掩码处理逻辑，导致功能异常。所有输入相关的事件、配置统一在外层InputMask上绑定即可。

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