为什么onChange与onKeyDown事件会同时触发？有办法阻止该情况吗？

触发逻辑本质 #

• onKeyDown对应浏览器原生keydown事件：按键按下的瞬间立即触发，此时按键对应的输入内容还未写入输入框，输入框的value尚未变更。
• React封装的onChange本质监听的是原生input事件：仅在输入框value发生实际变更后触发，可打印字符按键按下后，浏览器默认将字符写入输入框的动作发生在keydown事件执行完成之后，因此值变更后会触发onChange。
• 你观测到的onKeyDown先输出、onChange后输出的顺序完全符合浏览器标准事件执行规则，属于正常现象。

可选的拦截方案 #

如果需要在特定场景下避免两个事件先后触发，可以在onKeyDown回调中调用e.preventDefault()阻止浏览器默认的输入行为，输入框value不会发生变更，自然就不会触发后续的onChange，参考示例：

import React, {useState} from 'react';

function App() {
  
  const onHandleChange = () => {
    console.log("onChange");
  }
  const onHandleKeyDown = (e) => {
    console.log("onKeyDown");
    // 例：按下回车键时阻止默认输入行为，不会触发onChange
    if(e.key === 'Enter'){
      e.preventDefault()
    }
  }

  return (
    <div className="App">
      <input 
        onChange={onHandleChange}
        onKeyDown= {onHandleKeyDown}
      />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者darayuth hang