입력 문자열이 자동으로 버그로 변환 할 때 중국어 입력 요소에 반응

중국어 입력 문제가 최근에 개발 과정에서 반응 발생했을 수 많은 학생들 건너 온, 다음과 같이 특정 성능은 다음과 같습니다

 

 

내 장치 : iphoneXR, 아이폰과 중국어 입력 방법을 기본.

코드 첫 :

... 
textareaChange (EV) { 
        하자 textVal = ev.target.value 
　　　　　을 console.log (textVal) 

        //删除이모티콘表情符号
        할 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 | \ 아랍 | \ u3030 / IG; 
        textVal = textVal.replace (/ (^ \ S *) | (\ S * $) / g, "") .replace (regStr, '') 

        //删除空格
        textVal = textVal.replace (/ \ S / g, '') 

        this.setState ({ 
            값 : textVal 
        }) 
    } 
... 
<텍스트 영역 
                클래스 명 = {클래스 이름} 
                DEFAULTVALUE = {DEFAULTVALUE} 
                값 = {값} 
                의 onChange = {(E) => this.textareaChange (E)}            
> </ 텍스트 영역> 
...

　이 코드는, I 시간 텍스트 영역의 요소의 값을 변경할 수는 이모티콘 식과 내부 공간 필터링 textareaChange 방법을 수행한다.

 

이 버그에 대한 이유 :

우리는 중국어 입력 방법을 사용할 때 우리는 알파벳, 각 유형의 문자를 입력 할 때의 OnChange 이벤트를 트리거합니다. 그것은 우리가 WOM을 입력 할 때 "우리는"예를 들어, 우리는 이벤트 onchange를 주문 CONSOLE.LOG에서 얻을 수있는 입력해야합니다

w

어디에

WOM

m WO

시간이 m 하시다 경우 할당이 다시 렌더링 렌더링 트리거 후, 텍스트 영역 값 WOM 결과, 재 할당하는 코드의 실행 공간을 대체 값을 줄 것이다,이 사실, 우리가 원하는 것은 "우리"단어입니다.

 

최적화 :

값의 재 할당을 유발하지 않는, 또는 직접 할당의 값을 변경할 수없는 이벤트의 OnChange. 제출 이모티콘 및 대체 값 있도록 공간이 제출 될 때 또한 및 onblur 이벤트 또는 인터페이스에, 않도록이 문제가하지.