I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

Question

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

I've created a component named button.tsx, which contains a function that performs specific tasks when the button is clicked. The function this.saveSearch triggers the saveSearch() function.

button.tsx

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

In sentence.tsx, I want to be able to detect when this button is clicked and display a specific div if the user has clicked it.

sentence.tsx

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

javascript typescript jsx stenciljs

Answer 1

Answer №1

Here are a few options for you to consider:

If you want to add a click event listener for the button component in sentence.tsx, you can do so by following these steps. Please note that it might be a bit more challenging if you are dealing with elements enclosed in Shadow DOM:

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

Another option is to use EventEmitter (check out ). In your button.tsx file, you can include the following:

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

Then, you can implement something like this in your button's onClick function:


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

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

After that, in your sentence.tsx file, you can add an event listener for your button component as shown below:

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

If suitable for your specific use case, you can also utilize Stencil Store. However, be mindful that it might be excessive depending on your requirements - check out this link for more details:

Answer 2

Here are a few options for you to consider:

If you want to add a click event listener for the button component in sentence.tsx, you can do so by following these steps. Please note that it might be a bit more challenging if you are dealing with elements enclosed in Shadow DOM:

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

Another option is to use EventEmitter (check out ). In your button.tsx file, you can include the following:

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

Then, you can implement something like this in your button's onClick function:


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

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

After that, in your sentence.tsx file, you can add an event listener for your button component as shown below:

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

If suitable for your specific use case, you can also utilize Stencil Store. However, be mindful that it might be excessive depending on your requirements - check out this link for more details:

I'm trying to determine in Stencil JS if a button has been clicked in a separate component within a different class. Can anyone assist

Answer №1

Similar questions

Switch up the Position of a Frame with jQuery

How can I ensure the button remains disabled until all inputs are completed in Redux form?

Discovering the specific value from a fixture file in Cypress

The ng-bootstrap typeahead is encountering an error: TypeError - Object(...) is not functioning correctly

Typescript interface requiring both properties or none at all

Exchange selection choices among harvested selected boxes

What strategies can I use to prevent making multiple API calls inside setInterval when initializing a new connection in a socket?

The value binding for input elements in Angular 4 remains static and does not reflect changes in the UI

Setting up Geolocation

Utilize the input type=date value in the date function to obtain a specific format

What could be causing the NoScript tag to malfunction across different web browsers?

cookies cannot be obtained from ExecutionContext

Tips for transferring information from a form to your email address

Responsive Grey Tiles for Google Maps v3

As the second line of Javascript code is being executed, the first line is still

Can spreading be used for destructuring?

Dealing with the Back Button Problem in History API and History.js

Preventing Content Changes When Ajax Request Fails: Tips for Error Checking

angularjs determining the appropriate time to utilize a directive

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?