inferno: currentTarget value always is null in Event object

Inferno 1.6.0+: currentTarget value always is null in Event object. I have prepared example component:

const clickHandler = e => {
  console.log(e, e.currentTarget.dataset);
};

function TestComponent() {
  return (
    <div onClick={clickHandler} data-test={1}>
      <span>Click me!</span>
    </div>
  );
}

export default TestComponent;

Expected behaviour: currentTarget should be div It’s working properly in Inferno 1.4.0

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (10 by maintainers)

Commits related to this issue

Re-introduce currentTarget, fixes Github #1009 — committed to infernojs/inferno by deleted user 7 years ago

Most upvoted comments

I switched to preact over this. Maintaining React-compatibility is greater value than having to support infernojs breaking differences in the event system from React’s. If you could support the React event API and make your special case optimizations opt-in instead of mandatory, it would be better for my use.

MichaelRando on Apr 7, 2017

Due to high demand from community for currentTarget we will re-introduce it in next release.

Havunen on Apr 8, 2017

@MichaelRando I’m happy for you to contribute code here if you can in free time? That’s pretty much what the entire Inferno team does anyway. We’re not paid for any of this.

I think there are two things:

fixing currentTarget in our synthetic events so it aligns with React/Preact
discuss if we should still be using delegated events by default

Personally, I’d like to rip out the event system entirely and have it as it’s own thing. I’m pushing for this to happen on React too, but that’s a far harder problem and maybe one to happen in the future. What the API for that would look like is tricky, maybe defined in the component or maybe more explicit? Maybe with functional stateful components too?

import { onClick } from 'inferno-events';

const clickButton = onClick.delegate((event, props, state, setState) => {
  setState({ counter: state.counter + 1 }}
})

function MyComponent(props, state, context) {
  return <button events={ [ clickButton ] }>Click me { state.counter }</button>
}

trueadm on Apr 7, 2017