React中onKeyDown的event.target.value滞后及jest测试backspace异常问题

问题1：onKeyDown事件中获取输入框值滞后 #

根本原因：onKeyDown 触发时机是按键按下的瞬间，此时输入框的value还没完成更新。你看到控制台打印的event.target展开后是最新值，是因为浏览器控制台打印DOM对象时存储的是引用，你展开查看的时刻值已经完成更新，和打印时的实际值不一致。
解决方案分两种场景：

• 如果你不需要在按键按下阶段阻止默认行为，直接把取值逻辑移到onChange或onInput事件中即可，这两个事件触发时输入框value已经完成更新，直接取event.target.value就是最新值。
• 如果你必须在onKeyDown中拿到预测的更新后值，可以手动拼接计算：
  1. 普通可打印字符（非功能键）：const nextValue = event.target.value + event.key
  2. 退格键（无选中文本时）：const nextValue = event.target.value.slice(0, -1)
  3. 如果存在用户选中文本再输入的场景，需要结合event.target.selectionStart、event.target.selectionEnd计算裁剪后的最终值。

问题2：jest测试中模拟退格不触发onChange #

绝大多数情况是userEvent的API使用错误导致的，排查点如下：

• 所有userEvent的交互API都是异步的，必须加await关键字等待交互完成，否则事件触发流程没跑完就会跳过后续的onChange：

  // 错误写法
  userEvent.type(myInputBox, '{Backspace}');
  // 正确写法
  await userEvent.type(myInputBox, '{Backspace}');
  

• 确认使用的是@testing-library/user-event v14及以上的正式版本，低版本对特殊按键的模拟存在兼容问题。
• 如果是受控输入框，确保测试中正确关联了状态更新逻辑，onChange触发后能正确更新绑定到输入框的value属性，不要单独测试事件函数而忽略组件的状态流转。
• 如果以上排查都没问题，可以临时用fireEvent辅助触发验证：fireEvent.change(myInputBox, {target: {value: '期望的更新后值'}})，但优先保证userEvent的用法正确。

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