React JS手机号校验实现：如何限制输入类型与长度？

问题根因 #

• state滞后的原因：keydown 事件触发时机早于输入框值更新，此时读取e.target.value拿到的是输入前的旧值，所以state永远慢一拍。另外当前的按键判断逻辑未覆盖小键盘数字、粘贴输入、拖拽输入等场景，容错性差。
• type="number" 不兼容maxLength是HTML原生规范限制，maxLength仅对text、search、url、tel、email、password类型的输入框生效，对number类型无效。

解决方案 #

用受控组件+onChange事件做值校验，比按键监听方案更稳定可靠，同时兼容所有输入场景：

import { useState } from 'react'

// 初始化state为空字符串，避免undefined异常
const [number, setNumber] = useState('')

const handleInputChange = (e) => {
  // 过滤所有非数字字符
  const pureNumberVal = e.target.value.replace(/[^0-9]/g, '')
  // 仅当值长度不超过10位时更新state
  if (pureNumberVal.length <= 10) {
    setNumber(pureNumberVal)
  }
}

组件调用代码：

<FormControl 
  type="tel" 
  maxLength="10" 
  value={number} 
  onChange={handleInputChange} 
/>

方案优势 #

• type="tel" 移动端会唤起数字键盘，体验和type="number"一致，且原生支持maxLength限制
• 直接对输入值做过滤，无需判断按键code，天然支持主键盘/小键盘输入、粘贴、拖拽输入等所有场景
• 受控组件双向绑定，state和输入框值完全同步，不会出现滞后问题

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