如何解决如何在 react.js 中使用模板组件?
我有用于按钮的模板 Web 组件,我试图在反应中使用它的点击事件不起作用,但它在 angular 中工作正常。 我找到了许多使用 addEventListner 的解决方案,但是当我动态使用时这是不可能的。请帮我解决 addEventListner 以外的解决方案。
模板组件
import { Component,Prop,Event,EventEmitter } from '@stencil/core';
@Component({
tag: 'stencil-button',styleUrl: 'style.scss',shadow: true
})
export class StencilButton {
@Prop() label: string;
@Prop() primary: boolean;
@Prop() secondary: boolean;
@Prop() transparent: boolean;
@Event() handleSubmit: EventEmitter;
onSubmit() {
this.handleSubmit.emit();
}
render() {
return <button class={{ 'stencil-button': true,'stencil-button--primary': this.primary,'stencil-button--secondary': this.secondary,'stencil-button--transparent': this.transparent,}} onClick={() => this.onSubmit()}>{this.label}</button>
}
}
反应
<stencil-button handle-submit={() => { buttonClick() }} primary label='Submit'></stencil-button
这里 execpt click rest 正在工作
解决方法
您可以在 react 应用中通过以下方式监听 stencil 组件的事件:
<stencil-button onHandleSubmit={this.buttonClick} primary label='Submit'></stencil-button>
确保在您的代码中存在 buttonClick 方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。