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

Posted 2021-03-19 ayseeing

最近在 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|*|#]uFE0Fu20E3|[0-9|#]u20E3|[u203C-u3299]uFE0Fu200D|[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 和空格替换，这样就不会有这个问题了。