HTML数字输入框增减按钮在Ant Design模态框中连续触发数值变化问题

原实现代码：

<label> Hello: </label>
<input type="number" id="ambiguous_id"></input>

问题根因 #

该异常是组件库模态框的通用交互逻辑和原生数字输入框的事件逻辑冲突导致的，同时会出现在Ant Design、Material UI的模态框场景中：

• 原生type="number"输入框的增减按钮依赖mousedown触发首次数值变更、mouseup终止连续变更的原生事件逻辑
• 两类组件库的模态框默认都会在全局绑定mousedown事件监听，用于实现点击蒙层关闭模态框的功能，会拦截输入框增减按钮触发的mouseup事件，导致输入框一直判定处于按钮被按住的状态，持续触发数值增减，直到输入框失焦才会终止

修复方案 #

可任选以下一种方案修复：

• 阻断输入框的鼠标事件冒泡，避免被模态框的全局监听拦截，改动最小：

<label> Hello: </label>
<input 
  type="number" 
  id="ambiguous_id"
  onMouseDown={(e) => e.stopPropagation()}
/>

• 按React最佳实践给输入框绑定受控状态，数值完全由状态驱动，不受原生事件异常的影响：

import { useState } from 'react';

// 组件逻辑内定义状态
const [inputNum, setInputNum] = useState(0);

// 渲染部分
<label> Hello: </label>
<input 
  type="number" 
  id="ambiguous_id"
  value={inputNum}
  onChange={(e) => setInputNum(Number(e.target.value))}
/>

• 如果不需要点击蒙层关闭模态框的功能，直接给模态框设置对应关闭属性即可全局规避这类事件冲突：AntD模态框设置maskClosable={false}，Material UI Dialog设置蒙层点击关闭相关属性为禁用即可。

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