React中createElement创建元素时onChange事件失效问题求助

核心原因 #

在原生DOM API中，事件属性采用全小写命名（onchange），而非React JSX里的驼峰式onChange。你用React的事件命名习惯操作原生DOM元素，导致事件绑定不生效。

另外你尝试的inputForEnglish.onchange = "detectAnswerChange()"也无效，是因为字符串形式的事件处理函数会在全局作用域查找detectAnswerChange，但React组件内定义的函数属于组件局部作用域，全局作用域无法访问到。

两种有效解决方案 #

方案1：直接赋值函数（用小写onchange）

修正事件属性名称即可：

const inputForEnglish = document.createElement("input");
inputForEnglish.type = "text";
inputForEnglish.placeholder = "English";
inputForEnglish.dataset.answernumber = answers.children.length + 1;
inputForEnglish.dataset.textfield = "english";
// 改为小写onchange，直接传递函数引用
inputForEnglish.onchange = detectAnswerChange;

无需用箭头函数包裹，事件对象会自动作为参数传入detectAnswerChange。

方案2：使用addEventListener绑定事件

这是原生DOM更推荐的事件绑定方式，支持绑定多个同类型事件：

const inputForEnglish = document.createElement("input");
// ...其他属性设置
inputForEnglish.addEventListener('change', detectAnswerChange);

后续需要解绑事件时，可调用removeEventListener('change', detectAnswerChange)。

额外提醒 #

在React项目中，尽量避免直接操作原生DOM，优先使用React的状态管理和JSX渲染动态生成元素。直接操作DOM容易打破React虚拟DOM的一致性，引发难以排查的问题。若必须操作DOM，严格遵循原生DOM API规范。

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