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

问题描述

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

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

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

<Inputvalue={phone}onChange={(e) => {conssetPhone(e.target.value);}}/><span>{phone}</span></div>

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

const Index= () => {const [phone, setPhone] = useState('');return (<div><Inputvalue={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><Inputvalue={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>);
};