0

別のボタンをクリックして、あるボタンでのマウス クリックをシミュレートしようとしています。目標は、ページ全体で 1 つのカスタム ボタンの動作を再利用することです。が機能しないのはなぜdispatchEventですか?

クリックをどのよう<c-custom-button>にシミュレートできますか?

parentApp.html

<template>
    <div>
        <c-custom-button
            label="New">
        </c-custom-button>
    </div>
    <div>
        <lightning-button
            label="Call New"
            onclick={simulateClick}>
        </lightning-button>
    </div>
</template>

parentApp.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {

    cButtonElement;

    simulateClick() {
        this.cButtonElement = this.template.querySelector('c-custom-button');
        let clickEvent = new CustomEvent('click');
        this.cButtonElement.dispatchEvent(clickEvent);
    }

}

customButton.html

<template>
    <lightning-button
        label={label}
        icon-name="utility:new"
        onclick={handleClick}>
    </lightning-button>
</template>

customButton.js

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @api label;

    handleClick() {
        this.label = 'CLICKED!'
    }
}
4

1 に答える 1