为什么将onKeyDown和onKeyUp绑定到contenteditable div中的span时无法触发？

Question

下面是一个演示问题的代码片段：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render() {
    return (
     <div contentEditable="true">
       <p>
         <span onKeyDown={(e)=>{
           alert("hello world!!")
          }}>Hello world</span>
       </p>
     </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

专注于 div 并按下一些按钮后，警报未被触发。为什么？

https://codesandbox.io/embed/react-playground-forked-fymxg3?fontsize=14&hidenavigation=1&theme=dark

- VOLK 14

Answer 1

< p > contenteditable 元素的内容被视为用户输入，而不是 DOM 的一部分。与 <input> 元素中的文本相同。

因此，您不能像处理普通 DOM 一样与该元素的值进行交互 - 这意味着您在此处无法使用事件处理程序。

- creage

Answer 2

我曾经遇到过同样的问题。

不过，我们可以为所有 contenteditable 父元素的子元素添加点击监听器。

由于想要编辑子元素文本的人首先需要单击它，因此我们可以暂时“存储”该子元素，然后就知道哪个子元素的文本被编辑了。

- stckvrw