[英]Webcomponent Custom Element pass function 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.