react to the time of the input element Chinese input automatically converted into a string bug

Recently came across Chinese input problem many students may have encountered in react during development, specific performance is as follows:

 

 

My Device: iphoneXR, with the iphone default Chinese input method.

First on the code:

...
textareaChange(ev) {
        let textVal = ev.target.value
　　　　　console.log(textVal)

        // delete emoji emoticons
        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, '')

        // remove spaces
        textVal = textVal.replace(/\s/g, '')

        this.setState({
            value: textVal
        })
    }
...
<textarea
                className={classname}
                defaultValue={defaultValue}
                value={value}
                onChange={(e)=>this.textareaChange(e)}           
></textarea>
...

　This code, I change the value of the textarea element of time, it will perform textareaChange method, which which will filter out emoji expressions and spaces.

 

The bug of reasons:

When we use the Chinese input method, when we enter the alphabet, each type a letter, will trigger the onChange event. Has to be entered "we" for example, when we enter wom, we can get turn console.log out in onchange event

w

Where

wom

wo m

When is wo m time, it will perform a space replacement code, to value re-assignment after assignment will trigger render re-rendered, resulting in textarea value wom, two in fact, what we want is the "we" word.

 

Optimization:

Event onChange triggered which do not re-value assignment, or do not make any changes to the acquired value of the direct assignment. Also in the onBlur event or when the interface submitted do emoji and replaced with spaces of value to be submitted, so as not to have this problem.