React-Number-Format 中 IPv4 地址输入掩码的实现方案

在表单开发中，处理 IPv4 地址输入是一个常见需求。React-Number-Format 作为一款强大的数字格式化库，可以通过自定义格式实现 IPv4 地址的输入掩码功能。本文将详细介绍如何利用该库的特性来优雅地解决 IPv4 地址输入问题。

IPv4 地址输入的特点

IPv4 地址由四个用点分隔的数字组成，每个数字范围在0-255之间。这种格式的特殊性在于：

1. 每个段落的数字长度可变（1-3位）
2. 需要自动插入分隔点
3. 需要限制每个段落的数值范围
4. 需要处理退格等边界情况

实现方案

React-Number-Format 提供了 format 和 mask 属性，可以完美解决这些问题。以下是实现 IPv4 地址输入掩码的核心思路：

import NumberFormat from 'react-number-format';

function IPv4Input({ value, onChange }) {
  return (
    <NumberFormat
      value={value}
      onChange={onChange}
      format="###.###.###.###"
      mask="_"
      placeholder="000.000.000.000"
    />
  );
}

进阶实现

对于更复杂的需求，比如实时验证和自动跳转，可以使用自定义的 format 函数：

function ipv4Format(value) {
  const parts = value.split('.');
  return parts
    .map(part => part.padEnd(3, '_'))
    .join('.')
    .substr(0, 15); // 限制总长度
}

function IPv4InputAdvanced({ value, onChange }) {
  return (
    <NumberFormat
      value={value}
      onChange={onChange}
      format={ipv4Format}
      allowEmptyFormatting
    />
  );
}

注意事项

1. 输入验证：虽然掩码可以限制格式，但仍需在后端或前端进行完整的IP地址验证
2. 用户体验：考虑添加自动跳转功能，当用户完成一个段落的输入时自动跳到下一个段落
3. 移动端适配：确保在移动设备上键盘类型设置为数字键盘

通过以上方案，开发者可以轻松实现符合用户预期的IPv4地址输入组件，既保证了输入格式的正确性，又提供了良好的用户体验。