即時搜索框輸入中文未完成時會搜索英文字符的解決方案

動態搜索框在進行中文搜索時，一般狀況下，輸入下面這種狀況的時候，會搜索 chengd 關鍵字，但這並非咱們想要的。

 

那麼怎麼解決呢？能夠經過兩個事件：onCompositionStart 和 onCompositionEnd 解決這個問題。

這兩個事件都是在輸入中文時纔會觸發，英文輸入法不會觸發。

onChange 的時候經過判斷 lock 執行是否搜索的功能。當中文輸入開始時，將 lock 設置爲 true 便不會進行搜索，輸入結束後 lock 改成 false 便開始搜索，不過有個問題是 onCompositionEnd 是在 onChange 以後觸發，因此須要在 onCompositionEnd 時調用一次搜索接口。

    // 中文輸入法開始輸入進行加鎖
    onInputStart = () => {
        lock = true;
    };
    // 中文輸入法輸入完成的時候進行搜索
    onInputEnd = () => {
        const { comSearch } = this.props;
        lock = false;
        comSearch.onSearch(comSearch.input);
    };

    onSearch = (e) => {
        const { comSearch } = this.props;
        comSearch.changeInput(e.target.value, !lock);  // 沒上鎖的時候才進行搜索。此方法包含搜索功能
    };