模板字符串中定义方法并传参
遇到一个使用js es6的模板字符串进行事件绑定和传参的问题,这个问题的引起是因为使用innerHTML插入了一大串html并进行事件的绑定和传参。
以react为例,写一个demo记录一下
模板字符串中写方法的话需要用onclick来定义,传参需要这么写${char},并且用字符串包裹中,否则会提示未定义的变量,如下:
`<span style="background-color: #a2efe6; cursor: pointer" onclick="onHandleClick('${char}')" >${char}</span>`
然后需要把这个方法挂载到window下才可以执行到,如下:
useEffect(() => {init();
}, [])const init = () => {(window as any).onHandleClick = (e) => {console.log('onHandleClick',e);}
}
其他框架的写法大同小异