Beginner problem with eventProxy

[sazarkin]

I am just starting with preact and having issue with event listeners

Here is the example
https://jsfiddle.net/pntsqh8v/

import { h, Component, render } from 'https://esm.sh/preact@10.13.1';
import htm from 'https://esm.sh/v112/htm@3.1.1/es2022/htm.mjs';
const html = htm.bind(h);

class App extends Component {
  onPlay() {
    ev.preventDefault();
    console.log('HERE');
  }

  render() {
    return html`<button onClick={onPlay.bind(this)}>Click</button>`;
  }
}
render(html`<${App} />`, document.body);

And on click it produces error

this.l[(e.type + false)] is not a function

Looks like this._listeners is underlined here

preact/src/diff/props.js

Line 152 in de08e91

return this._listeners[e.type + false](options.event ? options.event(e) : e);

Am I missing something obvious ?

[JoviDeCroock]

In your example you are passing a string to onClick rather than an actual reference, in backtick land we need to use ${} to pass a JS value. Note the added $ here right after onClick=, I also added ev to the onPlay arguments else it would crash.

import { h, Component, render } from 'https://esm.sh/preact@10.13.1';
import htm from 'https://esm.sh/v112/htm@3.1.1/es2022/htm.mjs';
const html = htm.bind(h);

class App extends Component {
  onPlay(ev) {
    ev.preventDefault();
    console.log('HERE');
  }

  render() {
    return html`<button onClick=${this.onPlay.bind(this)}>Click</button>`;
  }
}
render(html`<${App} />`, document.body);

updated Fiddle

[sazarkin]

thanks!