SharePoint WebPart开发中TS调用JS函数绑定点击事件异常问题

问题根因 #

你遇到的报错和无响应问题和模块导出写法无关，核心是内联HTML的onClick属性只能访问全局作用域下的函数，而你通过ES模块导入的getApi仅存在于当前WebPart TS文件的模块作用域，全局作用域无法访问该函数：

• 写为onClick=${getApi()}时，会在HTML渲染阶段直接执行getApi，而非绑定为点击回调，若getApi返回值不是函数就会抛出"Object(...) is not a function"错误
• 写为onClick=${getApi}时，仅会把函数对象转为字符串插入属性，模块内的函数未暴露到全局，渲染后onclick属性值自然为undefined

解决方案 #

方案1：手动绑定事件（推荐，符合SPFx开发规范） #

放弃内联事件写法，HTML渲染完成后通过addEventListener绑定回调，自动继承模块作用域：

import { getApi } from './JSFunctions.module.js';

// 渲染HTML，给按钮添加唯一id，删除内联onClick
this.domElement.innerHTML = `
<input type="text" id="userEmailInput"><br><br>
<input type="Button" Value="Przycisk" id="apiCallBtn"><br><br>
<div id="html_BirthdayTable"></div>
`;

// 查找按钮元素绑定点击事件
const callBtn = this.domElement.querySelector('#apiCallBtn') as HTMLButtonElement;
callBtn.addEventListener('click', getApi);

如果getApi内部依赖this指向，绑定的时候调整为：

callBtn.addEventListener('click', () => getApi());
// 或
callBtn.addEventListener('click', getApi.bind(this));

方案2：挂载函数到全局（不推荐，有全局污染风险） #

如果必须使用内联事件写法，手动把导入的函数挂载到全局window对象上：

import { getApi } from './JSFunctions.module.js';
// 挂载到全局，TS中需要加类型断言避免报错
(window as any).getApi = getApi;

// 渲染时内联属性直接写函数名字符串
this.domElement.innerHTML = `
<input type="text" id="userEmailInput"><br><br>
<input type="Button" Value="Przycisk" onClick="getApi()"><br><br>
<div id="html_BirthdayTable"></div>
`;

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