<1> 非中文输入事件
输入过程中触发的事件流程大致如下：
- 获取焦点 onFocus()
- 按下 onKeyDown() ---- 可以拿到 keyCode [ e.keyCode]
- onKeyPress() ---- 拿不到 keyCode ，一直为 0
- onKeyUp() ---- 可以拿到 keyCode
- onInput() ---- 在输入框中输入值时触发，可以获取输入的值，event.target.value
- onChange() ---- 输入框中的值改变时触发
- onBlur() ---- 失去焦点后触发
做表单校验 / 匹配模糊搜索时：
-
针对实时校验，推荐用
onInput事件； -
针对填写完成再校验，推荐用
onBlur事件；
<2> 中文输入事件 compositionstart和compositionend
引入
ompositionstart和compositionend两个事件，当用户使用拼音输入法开始输入汉字时，compositionstart事件就会被触发。当文本段落的组成完成或取消时, compositionend 事件将被触发。 即在我们开始输入中文的时候会触发一次compositionstart事件，中文输入过程中不会再触发compositionstart事件，最后输入中文完成触发compositionend 事件。
输入中文的时候，compositionstart先于input事件触发。如下：
- onFocus()
- onKeyDown()
- compositionstart()
- compositionupdate()
- onInput()
- onChange()
- compositionend()
- onKeyUp()
所以如果是想等中文拼完毕后，才进行模糊匹配搜索，就可以创建一个标识 flag 来记录是否开始中文输入，在compositionstart事件触发后，把 flag 设为
true，在onIput事件中，做一个判断，如果 flag 为true，就阻止该事件发生，即当中文拼写完成后，再进行模糊匹配搜索过滤，如果 flag 为fasle，就正常进行过滤！！！而当拼写完毕，触发 compositionend 事件后，再该事件中，把 flag 设为false！！！
注意：
flag不要用 useState() 进行创建，踩雷，该 hook 为异步的，即不能马上拿到更新后的数据 ，用 useRef() 存储！！！！
