react给input元素中文输入的时候自动转成字符串bug

最近在 react 开发过程中碰到很多同学可能都碰到过的中文输入问题,具体表现如下:

 

 

我的设备: iphoneXR ,用的 iphone 默认的中文输入法。

先上代码:

...
textareaChange(ev) { let textVal = ev.target.value
     console.log(textVal) // 删除 emoji 表情符号 let regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|\uA9|\uAE|\u3030/ig; textVal = textVal.replace(/(^\s*)|(\s*$)/g, "").replace(regStr, '') // 删除空格 textVal = textVal.replace(/\s/g, '') this.setState({ value: textVal }) } ... <textarea className={classname} defaultValue={defaultValue} value={value} onChange={(e)=>this.textareaChange(e)} ></textarea>
...

 这段代码,我在改变 textarea 元素的值的时候,会执行 textareaChange 方法,这个方法里面会过滤掉 emoji 表情和 空格。

 

出现这个bug的原因:

当我们用的是中文输入法,当我们输入拼音的时候,每键入一个英文字母,都会触发 onChange 事件。已要输入的 “我们” 为例,当我们输入 wom 的时候,我们在 onchange 事件中能得到依次console.log出

w

wo

wom

wo m

当是 wo m 的时候,会执行空格替换代码,给 value 重新赋值,赋值后会触发 render 重新渲染,导致 textarea 的值为 wom,二其实我们想要的是“我们”这两个字。

 

优化方案:

onChange 触发的事件里面不要重新对 value 赋值,或者不要对获取到的值做任何改动直接赋值。另外在 onBlur 事件或者接口提交的时候对要提交的值做 emoji 和空格替换,这样就不会有这个问题了。

posted @ 2020-01-03 13:46  破男孩  阅读(...)  评论(...编辑  收藏