React JS中动态创建按钮的onClick事件不生效报错排查

你当前的代码存在两个直接导致报错的问题：

• 写的onClick={removeQuestion}是React JSX的专属语法，原生HTML不识别这种写法。原生HTML内联事件属性是全小写的onclick，属性值需要是可直接执行的JavaScript代码字符串，不能直接传函数引用。
• 你定义的removeQuestion是用const声明的模块/块级作用域函数，没有挂载到全局window对象上。就算内联事件语法写对，事件触发时浏览器会到全局作用域查找对应函数，找不到就会抛出引用错误。

方案1（推荐）：通过原生DOM API创建元素+事件监听绑定 #

这种写法不需要把函数暴露到全局，没有作用域问题，也能避免HTML拼接带来的XSS注入风险，是原生JS场景下的最优写法：

const removeQuestion = () => {
  console.log('test')
};

const addQuestions = () => {
  // 创建a标签元素
  const removeBtn = document.createElement('a');
  removeBtn.setAttribute('color', 'primary');
  removeBtn.textContent = ' x';
  // 直接绑定点击事件
  removeBtn.addEventListener('click', removeQuestion);
  // 插入到页面
  document.body.append(removeBtn);
};

方案2：修正insertAdjacentHTML的字符串写法（不推荐） #

如果你一定要用拼接HTML字符串的方式插入元素，需要同时修正内联事件语法、把目标函数挂载到全局作用域：

// 将函数挂载到window全局作用域
window.removeQuestion = () => {
  console.log('test')
};

const addQuestions = () => {
  // 注意：事件属性为小写onclick，属性值是函数调用的字符串，不要用JSX的大括号语法
  const removeBtn = '<a color="primary" onclick="removeQuestion()"> x</a>';
  window.document.body.insertAdjacentHTML('beforeend', removeBtn);
};

注意：方案2会污染全局命名空间，如果拼接的HTML内容包含用户可控输入，还会引发XSS安全漏洞，非特殊场景不建议使用。

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