React JS中如何为数字输入框的上下箭头分别绑定独立函数？

实现方案 #

原生 <input type="number" /> 的 onChange 事件不会直接返回点击的是上箭头还是下箭头，最简便的实现方式是通过新旧值的差值判断来区分触发逻辑：

方法1：差值判断法（推荐，改动最小）

直接用变更后的新值和原有值对比，大于原值就是触发加逻辑，小于原值就是触发减逻辑，代码示例如下：

<input 
  type='number'
  pattern="[0-9]*"
  required
  value={productos.cantidad}
  onChange={(e) => {
    const newValue = e.target.valueAsNumber
    const oldValue = productos.cantidad
    if (newValue > oldValue) {
      // 点击上箭头/按上键，执行+1逻辑
      mas(productos.descripcion, oldValue, newValue)
    } else if (newValue < oldValue) {
      // 点击下箭头/按下键，执行-1逻辑，menos为你新增的减函数
      menos(productos.descripcion, oldValue, newValue)
    }
  }}
/>

• 该方案同时兼容键盘上下键调整数值的场景
• 如果要避免用户手动输入数值导致差值判断异常，可以给标签添加 readOnly 属性，仅允许通过箭头调整数值

方法2：自定义箭头（可控性更高）

如果需要自定义箭头样式、完全控制交互逻辑，可以先隐藏原生箭头，自己写两个按钮模拟上下箭头，单独绑定事件：
首先加CSS隐藏原生箭头：

/* Chrome、Safari、Edge等Webkit内核浏览器 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox浏览器 */
input[type=number] {
  -moz-appearance: textfield;
}

然后修改组件结构：

<div style={{display: 'flex', alignItems: 'center'}}>
  <button onClick={() => menos(productos.descripcion, productos.cantidad, productos.cantidad - 1)}> - </button>
  <input 
    type='number'
    pattern="[0-9]*"
    required
    value={productos.cantidad}
    readOnly
  />
  <button onClick={() => mas(productos.descripcion, productos.cantidad, productos.cantidad + 1)}> + </button>
</div>

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