Antd InputNumber 组件浅用

web 开发中，处理数字输入是一个常见需求。无论是在表单中收集用户的年龄、设置商品的数量，还是定义参数的界限，一个好用且功能全面的数字输入组件都是不可或缺的。InputNumber 组件正是为了满足这种需求而设计的，它不仅提供了基本的数字输入功能，还支持一系列高级配置，以适应各种复杂场景。本文将从一个示例代码入手，详细介绍 InputNumber 组件的属性和使用方法。

先看代码

  <InputNumber
    min={0} // 最小值
    max={10000} // 最大值
    disabled={btnStatus === 0} // 某些情况下禁止使用
    placeholder="No limit" // 占位符
    step="1" // 步长为1
    formatter={value => {
      if (!value) return null; // 如果是空字符串则显示占位符
      const _a = Number(value); // 否则将string变成number类型
      if (!_a) return 0; // 如果为0或者NaN则返回0
      return parseInt(value); // 返回整数
    }}
    stringMode
  />

基本属性

min 和 max

min 和 max 属性定义了 InputNumber 可接受的最小值和最大值。这是确保用户输入在特定范围内的基本方式。在示例中，最小值被设置为 0，而最大值则为 10000。这意味着用户无法输入小于 0 或大于 10000 的值，为数据的有效性提供了基础保障。

min={0}
max={10000}

disabled

disabled 属性允许开发者根据条件启用或禁用 InputNumber 组件。这在表单的动态交互中非常有用，比如当某些前置条件未满足时，可以阻止用户输入。上述代码中，disabled 属性根据 btnStatus 的值动态设置。当 btnStatus 等于 0 时，InputNumber 组件将被禁用。

disabled={btnStatus === 0}

placeholder

placeholder 属性定义了当输入框为空时显示的占位文本。它对于指导用户输入具有重要作用，尤其是在输入框的功能不是一目了然时。示例代码中，placeholder 被设置为 "No limit"，这向用户传达了一个信息：如果他们不设定一个具体的值，就没有限制。

placeholder="No limit"

step

step 属性决定了每次增加或减少的步长值。它使用户能够快速地调整到精确的数值，特别是在需要精确输入时。在示例代码中，步长被设置为 1，意味着每次点击增加或减少按钮，数值会相应地增加或减少 1。

step="1"

格式化函数 formatter

formatter 属性是一个函数，用于格式化显示在输入框中的值。这个功能特别适用于需要按照特定格式展示数字的场景。在我们的示例中，formatter 函数首先检查输入值是否为空，若为空，返回null以保证placeholder的出现 。接着，它将字符串值转换为数字，若转换结果为 0 或 NaN，则返回 0；最后，它确保返回的是一个整数。这一系列操作确保了即使用户输入非数字字符，输出也会是一个合法的整数值。

formatter={value => {
  if (!value) return null;
  const _a = Number(value);
  if (!_a) return 0;
  return parseInt(value);
}}

stringMode

stringMode 属性允许 InputNumber 处理高精度小数。当设置为 true 时，组件内部使用字符串而非数字来处理输入，从而避免了 JavaScript 在处理大数或高精度小数时可能出现的精度问题。这在金融等需要处理大量货币或其他精确数值的应用中尤其重要。

stringMode

其他可用属性

尽管上述代码展示了 InputNumber 组件的一些属性，但 InputNumber 还支持许多其他属性，可以用来进一步自定义组件的行为和外观。下表列举了一些其他常用的属性，使用这些属性可以帮助开发者在不同场景下更好地利用 InputNumber 组件。

属性名	类型	描述
precision	number	定义数值的精度，即小数点后的位数。
size	string	设置输入框的大小，可能的值有 large、default 或 small。
bordered	boolean	是否显示输入框的边框。默认为 true，设置为 false 可以隐藏边框。
readOnly	boolean	如果设置为 true，则输入框为只读状态。
onChange	function	当输入值变化时的回调函数。参数为变化后的值。

这些属性提供了额外的控制选项，可以用来定制 InputNumber 组件以满足特定的需求。例如，通过设置 precision，开发者可以控制用户输入的数值精度；而通过 size 属性，则可以调整输入框的尺寸以适应不同的界面设计。

结尾

InputNumber 组件是一个强大而灵活的工具，适用于需要数字输入的各种场景。从基本属性到高级配置，它提供了丰富的选项来满足不同的需求，如范围限制、步长调整、格式化以及精度控制等。通过合理利用这些属性，开发者可以为用户创建更加友好和直观的数字输入体验。