I want to pass a function to Custom Element using ReactJS
ReactJS Component
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>
)
}
};
Custom Element
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);
As I understand, when I pass onclick function handleClick
JS will search for it in Custom Element implementation (that's why I get an error in console). So how to pass a function? I tried "this.handle"
but it also didn't work.
由于反应文档,您的html看起来应该像这样
<sample-component onClick={handleClick}></sample-component>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.