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

Question

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

按钮.tsx

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

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

句子.tsx

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

Answer 1

您有几个选择：

1. 您可以在sentence.tsx为按钮组件附加一个单击事件侦听器。 请注意，如果您正在使用封装在 Shadow DOM 中的元素，这可能会更棘手：

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

2. 您可以使用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.
});

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