React TypeScript中解决onclick事件‘无法赋值给MouseEvent类型参数’报错

错误原因 #

你代码里的问题在于错误地把事件处理函数当作参数调用了onclick属性，onclick是DOM元素的属性，需要直接赋值一个符合(ev: MouseEvent) => void类型的函数，而不是以调用方法的形式传参。

修复方案 #

方案1：修正onclick属性赋值方式 #

把调用onclick()的写法改成直接赋值函数：

const modal = jsonEditBtns[i].querySelector('.je-modal') as HTMLElement;
const paste: HTMLButtonElement = document.createElement('button');
paste.textContent = 'paste';
paste.classList.add(
  'btn',
  'btn-sm',
  'btn-primary',
  'mr-2',
  'my-1',
  'json-editor-btn-paste',
  'json-editor-btntype-paste'
);
// 因为paste是刚创建的HTMLButtonElement，不可能为null，无需额外判断
paste.onclick = () => {
  console.log('hello');
};

方案2：使用addEventListener（更推荐） #

这是DOM事件绑定的标准方式，支持添加多个同类型事件监听器，不会覆盖已有事件：

const modal = jsonEditBtns[i].querySelector('.je-modal') as HTMLElement;
const paste: HTMLButtonElement = document.createElement('button');
paste.textContent = 'paste';
paste.classList.add(
  'btn',
  'btn-sm',
  'btn-primary',
  'mr-2',
  'my-1',
  'json-editor-btn-paste',
  'json-editor-btntype-paste'
);
paste.addEventListener('click', () => {
  console.log('hello');
});

另外，你原来的if (paste && typeof paste !== null && paste.onclick !== null)判断完全多余——paste是通过document.createElement创建的HTMLButtonElement，必然是有效的DOM元素，不可能为null或undefined，可以直接移除。

内容的提问来源于stack exchange，提问作者Khant Min Si Thu