中文输入法（包括CJK输入法）都有的问题：如果<input>上监听input事件，在Win/Mac上每次按键都会触发。例如用拼音输入法输入动漫驿站，用户可能按键d.o.n.g.m.a…会触发13次事件，但其实只需要触发一次处理输入后的结果。早年间有很多trick的做法，比如keyup判断输入框内容是否是中文。现在是可以放心使用composition事件了。

场景是：使用Ant Design的Select搜索框，监听composition，输入结束后再搜索。

macOS 10.15.2
Chrome 79
Ant Design 3.25.2

因为只是输入的判断，使用state/hook反而复杂了，用一个全局变量标记是否正在输入，compositionstart为true，compositionend赋值false，在获取数据前检查这个标记，是false才获取，主要代码如下：

window.isInputing = false;

const Form = (props) => {
  const compositionListener = (e) => {
    window.isInputing = e.type === 'compositionstart';
  };

  const fetchData = (v) => {
    if (window.isInputing === false) {
      fetch();
    }
  };

  return (
     fetchData(v)}
    />
  );
}

如果是普通<input>可以直接addEventListener，但这里的<Select>是组件，而且没有onChange/onInput。从onFocus也获取不到实际的元素，它是一个setTimeout。所以按照文档描述现成的只能用onInputKeyDown了，修改<Select>：
  return (
    <Select
      showSearch
      value={v}
      onSearch={v => fetchData(v)}
      onInputKeyDown={(e) => {
        const el = e.nativeEvent.target;
        el.addEventListener('compositionstart', compositionListener);
        el.addEventListener('compositionend', compositionListener);
      }}
    />
  );
}

这么写就冒出几种可能性：

如果按照之前的写法，compositionListener函数在组件内，浏览器认为是不同的事件，会被重复绑定。要手动添加一个标记，比如修改元素的dataset，避免重复绑定。
把compositionListener函数放在组件外，只会被绑定一次，但要调用组件内部的函数——比如fetchData——就变复杂了。
绑定Composition事件后，在Chrome浏览器也是先触发onChange，才到compositionend。也就是在改变全局变量标记前已经执行了onSearch。

暂时不考虑把fetchData写成hook的方案，只在现有代码基础上改动，一时想不出最优写法，先改成了如果是Chrome浏览器执行一次fetchData。
  const compositionListener = (e) => {
    window.isInputing = e.type === 'compositionstart';
    if (window.chrome) {
      fetchData(e.target.value);
    }
  };

总结来看相对麻烦的还是CompositionEvent，都2020年了问题仍然存在。以前用setTimeout延迟100ms左右，等compositionend改变了全局变量的值再做后续处理。

				
	
			
	
	


						
	
	
	


	

		

			
	


	    

    
    

                    

                            
            

                

                                            

                             订阅评论
                            
                        
                                            

                                                

                             登录                        
                    
                
                                                    

                                                    

                                
提醒 
                                

                                    
                                                                                    此页的新后续评论
                                                                                                                                对我的评论的新回复