Delegate DOM events with Preact (since Preact doesn't do that by default).
npm install preact-delegate --save-dev
Just wrap your root element from where to capture events with DelegateContainer
and then wrap individual elements which should receive events with DelegateElement
. See example:
import { Component } from 'preact'; import { DelegateContainer, DelegateElement } from 'preact-delegate'; class MyComponent extends Component { constructor(...args) { super(...args); this.onClick = (e) => { console.log(e.target); }; } render({ items }) { return <DelegateContainer> <div class="my-component"> {items.map(item => ( <div class="my-item"> <DelegateElement click={this.onClick}> <button type="button" class="my-button">{ item.text }</button> </DelegateElement> </div> ))} </div> </DelegateContainer> } }