在 stencil js 中，我如何检查按钮是否已在来自不同 class 的另一个组件中单击

Question

我有一个名为 button.tsx 的组件，该组件包含一个函数，该函数在单击按钮时执行某些操作，this.saveSearch 触发 saveSearch() 函数。

button.tsx

  {((this.test1) || this.selectedExistingId) &&
                      (<button class="pdp-button primary"
                          onClick={this.saveSearch}>{this.langSave}</button>)
                    }

在 sentence.tsx 中，我希望能够看到单击此按钮的时间，并在用户单击它时显示某个 div。

sentence.tsx

           {onClick={saveSearch} &&  (<div class="styles-before-arrow">{this.langConfirmSearchSaved}</div>)}

Answer 1

您有几个选择：

您可以为sentence.tsx中的按钮组件附加一个点击事件侦听器。请注意，如果您正在使用封装在 Shadow DOM:

addButtonLister(): void {
  document.querySelector('.pdp-button')
          .addEventListener('click'), (e) => {
      // add your logic here.
  });
}

您可以使用 EventEmitter (https://stenciljs.com/docs/events#events)。在您的 button.tsx 中，您可以添加：

@Event({eventName: 'button-event'}) customEvent: EventEmitter;

然后在按钮 onClick:

上添加类似这样的内容


emitEvent() {
  customEvent.emit('clicked');
}

render () {
  return <button onClick={this.emitEvent}>{this.langSave}</button>
}

然后从您的 sentence.tsx，向您的按钮组件添加一个事件侦听器：

// say your button component's tag is <button-component>
document.querySelector('button-component')
        .addEventListener('button-event', (e) => {
    // your logic here.
});

您可以使用 Stencil Store，但根据您的整体用例，我不确定这是否有点矫枉过正 - https://stenciljs.com/docs/stencil-store#store-state

在 stencil js 中，我如何检查按钮是否已在来自不同 class 的另一个组件中单击

In stencil js, how can i check if button has been clicked in another component from a different class

javascript

jsx

typescript

stenciljs