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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

最近在 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 和空格替换，这样就不会有这个问题了。

以上是 react给input元素中文输入的时候自动转成字符串bug 的全部内容， 来源链接： utcz.com/z/382453.html

回到顶部