question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't we use any eventlister like `onClick` on `<Element/>` tag that craftjs provide ???

See original GitHub issue

Is your feature request related to a problem? Please describe. Actually, I need use a function on onClick event listener as attribute on <Element/> tag that craftjs provides. But that function is not invoked. How will I able to achieve that ???

Describe the solution you’d like All the javascript/reactjs event listener must work on <Element/> tag.

Additional context Add any other context or screenshots about the feature request here.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
prevwongcommented, Mar 9, 2022

Not really, TS is not mandatory. I’m just using TS here to make my point a bit clearer.

1reaction
prevwongcommented, Mar 8, 2022

You will need to create some kind of event handling system yourself. Instead of storing functions as props (which is not possible in Craft), you can store a simpler representation as a prop:

type Event = {
   type: 'click' | 'mouseover';
   payload: {...}
}

type SomeElementProps = {
   events: Event[];
}

const SomeElement = (props: SomeElementProps) => {
    if ( props.event ) {
        // handle each props.event (eg: if event.type === "click", add an onClick Event Handler)
    }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't add onclick event to DOM element
You 're attempting to change the onclick attribute, which is expecting a string, and assigning it the return value of your sonFunction which ......
Read more >
HTMLElement: drop event - Web APIs | MDN
The drop event is fired when an element or text selection is dropped on a valid drop target. Syntax. Use the event name...
Read more >
Lots of Ways to Use Math.random() in JavaScript
It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it's possible for...
Read more >
Interacting with the Editor
With useEditor , you can add connectors to DOM elements anywhere in the editor to make use of the editor's internal events. Let's...
Read more >
e.stopPropagation() seems to not be working as expect.
I bind an click event on input element and document like follow: var Search ... uses a listener on the document for (almost)...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found