React：如何使用“contentEditable”div 上的“InputEvent”参数捕获“onInput”事件？答案

【问题标题】：React: How to catch `onInput` event with `InputEvent` arguments on `contentEditable` div?React：如何使用“contentEditable”div 上的“InputEvent”参数捕获“onInput”事件？
【发布时间】：2022-11-21 15:28:32
【问题描述】：

我需要从 InputEvent 中捕获 historyUndo 和 historyRedo。问题是，我的contentEditable div 给我的是FormEvent，而不是InputEvent。

const inputChanged = (e: InputEvent) => {
  //Error here because e is FormEvent type not InputEvent
  if(e.inputType === 'historyUndo' || e.inputType === 'historyRedo')
  {
    ....
  }
}

return <div contentEditable={true} onInput={(e) => inputChanged(e)}>
  ....
</div>

如何在 div contentEditable 上捕获 InputEvent？

【问题讨论】：

div 是否包含 Form？

标签： javascript reactjs typescript contenteditable inputevent

【解决方案1】：

您要做的是访问事件的 nativeEvent 属性。类似的东西。

const inputChanged = (e) => {
  if(e.nativeEvent.inputType === 'historyUndo' || e.nativeEvent.inputType === 'historyRedo')
  {
    ....
  }
}

return <div contentEditable={true} onInput={(e) => inputChanged(e)}>
  ....
</div>

【讨论】：