Adding eventListener in an onMount shows error in console
I created a form ref and added an event listener in a component with tsx
´´´
let formRef;
. . .
onMount(() => { console.log(formRef); formRef.addEventListener("input", (e) => { if (e.target.name !== "enable") { setIsJustSubmitted(false); } }); }); <form ref={formRef} onSubmit={submit}> . . . ´´´ The form gets printed a lot of times and the error i get is "Uncaught (in promise) TypeError: formRef is undefined" I tried multiple things but none did work, like trying to catch the error, making the event listener be added conditionally when the formRef is filled etc
onMount(() => { console.log(formRef); formRef.addEventListener("input", (e) => { if (e.target.name !== "enable") { setIsJustSubmitted(false); } }); }); <form ref={formRef} onSubmit={submit}> . . . ´´´ The form gets printed a lot of times and the error i get is "Uncaught (in promise) TypeError: formRef is undefined" I tried multiple things but none did work, like trying to catch the error, making the event listener be added conditionally when the formRef is filled etc
16 Replies
You can either use the ref function to set the listener manually or use the on:input prop to add a normal event.
You can also use oncapture:input for a capturing event.
how would that change the code?
You might need to extend some types if you are using TS.
Thanks!
How is it that with the onMount have this strange behaviour in my code (just to understand this better)?
The form has a conditional show in diferent locations, could this cause some problems with the ref? The Show component is mounting again their childs when they are not "shown" and change the visibility?
which difference there is between on:input and oninput? (if there is any) in the second option
on:x is the same as onx, but onx is obviously unsupported.
It's just an elegant way to add custom events.
@lexlohr
on:input was marking me an error but oninput worked fine with the rest of the code, it's strange
in typescript i had to cast the type in ev.target as HTMLFormElement too haha so long the code
there's a way i can reuse this oninput callback in other forms ?
You can use on:input if you declare input as FormEvent in CustomEvents: https://www.solidjs.com/docs/latest/api#special-jsx-attributes
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Unfortunately, even that is not too reusable, since it easily clashes with other event handlers; I had the same issue with input-mask. For the sake of simplicity, I decided to expose the event handler instead so the users could bind it themselves.
what happened with the input-mask?
As I said, I directly exposed the event handlers, so users could add them together with their own, if necessary.
Another option would be to use a directive.
Which basically gives you the ref to the element.
I come from React and i'm having trouble with some things. You could make something similar to a higher order component in solidjs?
Some things are clearer but the trouble is for the habit of doing things in a certain way haha
Yes and no. The problem is that the Component receives the children as result of DOM expressions, so there is no virtual DOM that could be manipulated.
I see
You can manipulate the children, but if you want the code to be isomorphic, that's going to be difficult, since those can be HTML Elements in the client and { t: string } on the server.
It really depends on your use case. There are almost always idiomatic patterns that are simpler in the long run.
It sounds like you want to create a form handling library.
You could create a <Form> component that internally adds an input event using the event-listener primitive https://primitives.solidjs.community/package/event-listener#directive-usage
Solid Primitives
A library of high-quality primitives that extend SolidJS reactivity
it's a patch of a functionality i need that is missing in one library to handle forms and errors of the forms.
The library is solid-form-handler. The problem is that with that library there's no easy way to reset the form (to set the dirty of the form to false) but that mantain the data present on the inputs. So I created the isJustSubmitted signal as a patch to this, but i wonder how to reuse this functionality (there's not too much but if i can reuse it's better I think).
I'll look into that