解決 React 中的 input 輸入框在中文輸入法下的 bug

以下會涉及到的技術點：react mobx compositionstart compositionupdate compositionend

 

問題描述

在使用 input 時，通常會對輸入的內容做校驗，校驗的方式無非兩種：

1. 允許用戶輸入，並且做錯誤提示；
2. 不允許用戶輸入正則或者函數匹配到的字符。

現有如下需求：“僅允許輸入英文、數字和漢字，不允許輸入其他特殊字符和符號”。顯然這種場景需要使用第二種校驗方式。

然后我自以為很機智的寫了下面的代碼（引入了組件庫 cloud-react），在輸入值變化的時候（onChange 事件），處理綁定到 input 上的 value，將除了英文、數字、和漢字之外的字符都替換成空字符串。

export default class CompositionDemo extends Component { constructor() { this.state = { value: '' }; } onChange(evt) { this.setState({ value: evt.target.value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '') }); }; render() { return <Input onChange={this.onChange.bind(this)} value={this.state.value} /> } }

平平常常，普普通通，一切看起來都是正常的操作，結果，當我輸入拼音的時候，神奇的事情發生了：連拼的時候除了最后一個字，前面的都變成了字符。

what??? 小問號，你是否有很多朋友？

於是，我踏上了一條不歸路，呸呸呸，是打開了新世界的大門，就是這個門對於我來說可能有點沉，推了兩天才看到新世界。

糾其原因：拼音輸入是一個過程，確切的說，在這個過程中，你輸入的每一個字母都觸發了 onChange 事件，而你輸入過程中的這個產物在校驗中被吃掉了，留下了一坨空字符串，所以就發生了上面那個神奇的現象。

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

解決方案

這里需要用到兩個屬性：compositionstart、compositionend

簡單點來說，就是當你開始使用輸入法進行新的輸入的時候，會觸發 compositionstart ，中間過程其實也有一個函數 compositionupdate，顧名思義，輸入更新時會觸發它；當結束輸入法輸入的時候，會觸發 compositionend。

下面進入正題：

首先，我們先看一下 Input 組件的一個很正常的實現：

import React, { Component } from 'react'; import PropTypes from 'prop-types'; export default class InputDemo1 extends Component { constructor(props) { super(props); this.state = { value: '', }; } static getDerivedStateFromProps({ value }, { value: preValue }) { if (value !== preValue) { return { value }; } return null; } onChange = evt => { this.props.onChange(evt); }; render() { return <input value={this.state.value} type="text" onChange={this.onChange} /> } }

Input 組件有兩種應用場景：

1. 不受控的輸入框：業務方不給組件傳入 value，無法控制輸入框的值；
2. 受控的輸入框：業務方可以通過給組件傳入 value，從而可以在外部控制輸入框的值。

不受控的輸入框在我使用過程中並沒有什么 bug，此處不做贅述，此處只談受控的輸入框，也就是我們需求（僅允許輸入英文、數字和漢字，不允許輸入其他特殊字符和符號）中需要使用的場景。

前面提到的 compositionstart 和 compositionend 該出場了：利用這兩個屬性的特點，在輸入拼音的“過程中”不讓 input 觸發 onChange 事件，自然就不會觸發校驗，好了，既然有了思路，開始碼代碼。

我們定義一個變量 isOnComposition 來判斷是否在“過程中”

isOnComposition = false; handleComposition = evt => { if (evt.type === 'compositionend') { this.isOnComposition = false; return; } this.isOnComposition = true; }; onChange = evt => { if (!this.isOnComposition) { this.props.onChange(evt); } }; render() { const commonProps = { onChange: this.onChange, onCompositionStart: this.handleComposition, onCompositionUpdate: this.handleComposition, onCompositionEnd: this.handleComposition, }; return <input value={this.state.value} type="text" {...commonProps} /> }

你以為就這么輕松解決了么？

呵，你想多了！

我仍然使用開篇那個 demo 來測試這個代碼，發現事情又神奇了一點呢，這次拼音壓根就輸不進去了哇～

我查看了下在輸入拼音時函數的調用:
是的，寧沒有看錯，只觸發了onCompositionstart 和 onCompositionupdate這兩個函數，我起初以為是邏輯被我寫扣圈了，想了想原因（其實我想了好久，人略笨，見笑）：

罪魁禍首就是綁定在 input 上的那個 value，輸入拼音的過程中，state.value 一直沒變，input 中自然不會有任何輸入值，沒有輸入值，也就完成不了輸入過程，觸發不了 compositionend，一直處於“過程中”。

所以這次不是程序邏輯扣圈，是中斷了。

於是我又想如何把中斷的程序接起來（對的，垮掉了我們就撿起來，哈），完成這個鏈條。

我想了好多辦法，也在網上看了好多辦法，可惜都解決不了我的困境。

各種心酸不堪回首，幸好最后找到了一個辦法：其實想想原來代碼中用 state.value 去控制 input 值的變化，還是沒有把 input 中何時輸入值的控制權放在自己手里，“過程中”這個概念也就失去了意義。只要 state.value 還和 input 綁在一起，就是我自己玩我自己的，人家玩人家的。於是，就有了下面讓控制權回到我手中的代碼。

import React, { Component, createRef } from 'react'; import PropTypes from 'prop-types'; export default class InputDemo extends Component { inputRef = createRef(); isOnComposition = false; componentDidMount() { this.setInputValue(); } componentDidUpdate() { this.setInputValue(); } setInputValue = () => { this.inputRef.current.value = this.props.value || '' }; handleComposition = evt => { if (evt.type === 'compositionend') { this.isOnComposition = false; return; } this.isOnComposition = true; }; onChange = evt => { if (!this.isOnComposition) { this.props.onChange(evt); } }; render() { const commonProps = { onChange: this.onChange, onCompositionStart: this.handleComposition, onCompositionUpdate: this.handleComposition, onCompositionEnd: this.handleComposition, }; return <input ref={this.inputRef} type="text" {...commonProps} /> } }

測了一下，大致上是沒問題了。

還要看一下谷歌瀏覽器和火狐瀏覽器，果然還有坑：

1. 火狐瀏覽器中的執行順序：compositionstart compositionend onChange
2. 谷歌瀏覽器中的執行順序：compositionstart onChange compositionend

最后再做一下兼容處理，修改一下 handleComposition 函數

handleComposition = evt => { if (evt.type === 'compositionend') { this.isOnComposition = false; // 谷歌瀏覽器：compositionstart onChange compositionend // 火狐瀏覽器：compositionstart compositionend onChange if (navigator.userAgent.indexOf('Chrome') > -1) { this.onChange(evt); } return; } this.isOnComposition = true; };

因為不管中間執行了那些函數，最后都是需要執行 onChange 事件的，因此加了判斷，對谷歌瀏覽器做了特殊處理（其它瀏覽器暫時沒做考慮和處理）。

后記

到此，正文結束了，我還要說兩個需要注意的地方，其實也是踩了的坑：

1. 如果 Input 組件的實現使用了 React.PureComponent ，在以上需求中會出現的問題：輸入特殊字符時，外部通過正則將其 replace 掉了，傳入 Input 組件內部的 value 實際上沒有任何變化，也不會觸發組件 render。這是因為 PureComponent 對 shouldComponentUpdate 函數做了優化，如果發現 props 和 state 上的屬性都沒有變化，不會重新渲染組件，因此我暫時的處理是：使用 React.Component ，組件實現中對 shouldComponentUpdate 封裝。
2. 在外部使用 mobx 的時候，如果使用 observable 監聽 value，會出現和上面蕾絲的情況—輸入特殊字符時，通過正則將其 replace 掉了，mobx 也發現 value 沒有任何變化，就不會觸發 render，我暫時的處理是使用 state，雖然我覺得這不是最好的辦法，但我目前還想不到其它的處理方式。