Antd 输入值滚动时发生变化

Question

当输入框处于焦点模式时，用户向上滚动数值时，数字自动增加，向下滚动时数值自动减小。这种效果仅在某些输入组件上注意到，并非全部，即使代码实际上是相同的，只是占位符值发生变化，任何人都知道其原因吗？我知道我可以通过滚动事件的 PreventDefault 来阻止此操作，但我想知道其背后的原因。谢谢

这是数字根据滚动增加或减少的代码

    <Input
      onChange={(e) =>
        updateAssembledInputs({
          key: 'assembledArray',
          value: {
            id: ele.id,
            key: 'quantity',
            value: e.target.value,
          },
        })
      }
      value={ele.productItems[0]?.quantity}
      type="number"
      onKeyDown={(evt) => INPUT_TYPE_NUMBER.includes(evt.key) && evt.preventDefault()}
      bordered={false}
      className="h-10 text-normal font-semibold font-montserrat
                   text-baby-elephant"
      suffix="UNITS"
    />

这是没有任何反应的代码

    <Input
      onChange={(e) =>
        updateAssembledInputs({
          key: 'assembledArray',
          value: {
            id: ele.id,
            key: 'minimalStockLimit',
            value: e.target.value,
          },
        })
      }
      value={ele.minimalStockLimit}
      type="number"
      onKeyDown={(evt) => INPUT_TYPE_NUMBER.includes(evt.key) && evt.preventDefault()}
      bordered={false}
      className="h-10 text-normal font-semibold font-montserrat text-baby-elephant"
      suffix="UNITS"
    />

Answer 1

这个错误的发生是因为 type="number"。如果您使用 Ant Design 输入表单，您可以在规则内（以模式）添加正则表达式以避免所有非数字的内容，然后您可以使用 type="text"

Answer 2

您可以添加属性 onWheel 并像这样处理事件，以防止在输入数字 antd 滚动时更改值：

onWheel={(e) => e.currentTarget.blur()}

我已经在 antd 5.11.1 版本中尝试过了，它对我有用