input框添加验证(如只允许输入数字)中文输入导致显示问题的解决方案

input框添加验证(如只允许输入数字)中文输入导致显示问题的解决方案

问题描述

测试环境：react + antd input (react的事件与原生js事件不同，思路是等同的)

实现：假设该input框只允许输入数字，如果输入字符不是数字就替换为空。

1.先关闭验证，在中文输入时，输入框会显示输入的字符。通过打印发现，输入中文时onChange被触发了。

const [phone,setPhone] = useState<number>();

<Input
     value={phone}
     onChange={(e) => {
     	console.log(e.target.value)
        setPhone(e.target.value);
     }}
     />
    <span>{phone}</span>
 </div>

2.打开验证，输入字符串时验证正常，但在输入中文时，onChange也会被触发，验证异常。

const Index= () => {
  const [phone, setPhone] = useState('');
  return (
    <div>
      <Input
        value={phone}
        onChange={(e) => {
          setPhone(e.target.value.replace(/\D/g, '')); 
        }}
      />
      <span>{phone}</span>
    </div>
  );
};

解决办法 onCompositionStart与onCompositionEnd

两个事件的触发时机compositionstart>onchange>compositionend

• compositionstart事件：文本合成系统（如输入法）开始新的输入合成时会触发，比如输入法开始输入中文。
• compositionend事件：。当文本段落的组成完成或取消时, 事件将被触发，比如中文选择完成。

所以我们的思路是，在进行中文输入的时候onChange回调函数提前退出不做验证；在中文输入完成后，触发验证。

const Index= () => {
  const [phone, setPhone] = useState('');
  const [flag, setFlag] = useState(false); // 识别是否正在输入中文

  return (
    <div>
      <Input
        value={phone}
        onCompositionStart={(e) => {
          setFlag(true);
        }}
        onCompositionEnd={(e) => {
          setFlag(false);
          setPhone(e.target.value.replace(/\D/g, '')); 
        }}
        onChange={(e) => {
          if(flag)setPhone(e.target.value); // 正在输入中文不验证
          else setPhone(e.target.value.replace(/\D/g, '')); 
        }}
      />
      <span>{phone}</span>
    </div>
  );
};