javascript - Webcomponent自定义元素传函数onClick
问题描述
我想使用 ReactJS 将函数传递给自定义元素
ReactJS 组件
import React from 'react';
import './SampleComponent';
export class Button extends React.Component {
handleClick = (event) => {
console.log(event)
}
render() {
return (
<div>
<sample-component onclick="handleClick"></sample-component>
</div>
)
}
};
自定义元素
class SampleComponent extends HTMLElement {
static get observedAttributes() {
}
// custom methods
render() {
this.innerHTML = `Custom Element`;
}
// lifecycle hooks
connectedCallback() {
this.render();
}
}
window.customElements.define('sample-component', SampleComponent);
据我了解,当我传递 onclick 函数时,handleClick
JS 将在自定义元素实现中搜索它(这就是我在控制台中收到错误的原因)。那么如何传递一个函数呢?我试过"this.handle"
了,但也没有用。
解决方案
由于反应文档,您的 html 应该如下所示
<sample-component onClick={handleClick}></sample-component>
推荐阅读
- r - 使用 R 进行地理编码:完全停止程序的错误
- tensorflow - tf.keras.callbacks.ModelCheckpoint 不保存最佳模型
- perl - 如何在perl中匹配精确的字符串
- github - 可以恶意使用具有空范围的个人访问令牌吗?
- android - 手动修改二进制 AndroidManifest.xml 文件
- python - 如何创建哈希的前 3 个字符为零的哈希 Sha-256?
- c++ - cygwin make 错误:找不到指定的模块
- rest - 微服务 HTTP GET 调用上的数据验证
- numpy - np.recarray 分配非常慢
- python - 使此 SQL 工作的正确方法是什么?