aquí hay un fragmento de código que demuestra el problema:
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') );Después de enfocarse en el div y presionar algunos botones, la alerta no se activa. ¿Por qué?
https://codesandbox.io/embed/react-playground-forked-fymxg3?fontsize=14&hidenavigation=1&theme=dark
El contenido del elemento contenteditable se trata como entrada del usuario y no forma parte del DOM. Igual que el texto en el elemento <input> .
Por lo tanto, no puede interactuar con el valor de ese elemento como lo hace con DOM normal, lo que significa que no hay controladores de eventos para usted aquí.