React 实现只能输入数字的 input

大家好，我是前端西瓜哥。

今天我们用 React 来实现一个只能输入数字的 input。

先写一个基础的 input 受控组件。

function Form() {
  const [numVal, setNumVal] = useState('');

  return (
    <input type="text" value={numVal} onChange={e => setNumVal(e.target.value)} />
  );
}

上面这种写法没有做任何限制，你可以在 input 元素上输入任何内容。

只能输入数字字符

现在我们要加入限制：只能输入数字字符。

很容易想到的做法是在 setNumVal 上封装多一层方法。这个方法会将 e.target.value 中非数字字符的部分移除，然后再传入到 setNumVal

function Form() {
  const [numVal, setNumVal] = useState('');

  const handleChange = (val: string) => {
    val = val.replace(/[^\d]/g, '');
    setNumVal(val);
  }

  return (
    <input type="text" value={numVal} onChange={e => handleChange(e.target.value)} />
  );
}

这里用了 string.prototype.replace 方法，/[^\d]/g 表示找非数字字符，g 表示多次查找，如果不带上，replace 只会替换第一个匹配字符串。

找到它们并将它们替换为空字符串，也就是移除掉，最后返回一个只有数字字符的字符串。

为了可以在任何的 input 或输入框组件上使用，我们不妨将其封装为 hook。

const useNumStrState = (defaultVal = ''): [string, (val: string) => void] => {
  const [numVal, setNumVal] = useState(defaultVal);

  const handleChange = (val: string) => {
    val = val.replace(/[^\d]/g, '');
    setNumVal(val);
  }

  return [numVal, handleChange];
}

// 使用
function Form() {
  const [numVal, setNumVal] = useNumStrState('');

  return (
    <input type="text" value={numVal} onChange={e => setNumVal(e.target.value)} />
  );
}

这样，一个有着基础能力的只能输入数字的 input 就完成了。

增强：移除前导 0 版本

下面再实现一个去掉前导 0 的版本，让用户只能输入合法的整数。

const useNumStrState = (defaultVal = ''): [string, (val: string) => void] => {
  const removeLeadingZeros = (s: string) => {
    const oldLen = s.length;
    s = s.replace(/^0+/, ''); // 移除前导零
    // 全为 0 的情况，留一个 0
    if (s.length === 0 && oldLen > 0) {
      s = '0';
    }
    return s;
  }

  defaultVal = removeLeadingZeros(defaultVal);
  const [numVal, setNumVal] = useState(defaultVal);

  const handleChange = (val: string) => {
    val = val.replace(/[^\d]/g, '');
    val = removeLeadingZeros(val);
    setNumVal(val);
  }

  return [numVal, handleChange];
}

同样也是用 replace 方法，/^0+/ 的意思是匹配从字符串首位开始的连续尽可能多的 0，然后将它们替换为为空字符串。

这里有一种特殊的情况，就是全是 0 的字符串，比如 0000，这时候需要保留一个 0。

结尾

让 input 只能输入数字并不复杂，只需要在 onChange 的时候将 e.target.value 进行处理，得到只含数字的字符串，再用它来修改状态就好了。

另外也不得不说 React Hook 是真的牛逼，让我们可以做到比组件更细粒度的复用逻辑封装。