Closed Prateek13727 closed 3 years ago
Hi @Prateek13727, the root of the issue is that event->ReactEvent.Form.target##value
is unsafe. The result of event->ReactEvent.Form.target
is Js.t({..})
—opened object—and compiler happily infers types of contents by its usage. So if you pass target##value
to a function that expects int
, the compiler would infer its type as int
. In reality though, the type of target##value
is string
and passing it to a function that expects int
, doesn't magically convert string
to int
.
I can suggest to create an app level module with a typesafe interface:
// ReactForm.re
type target = {
value: string,
checked: bool,
};
external target: Js.t({..}) => target = "%identity";
let target = (event): target => event->ReactEvent.Form.target->target;
let value = event => event->target.value;
let checked = event => event->target.checked;
// ReactForm.rei
let value: ReactEvent.Form.t => string;
let checked: ReactEvent.Form.t => bool;
And use it to get data from DOM:
event => event->ReactForm.value->Int.fromString
This is what I personally do.
Hey @alexfedoseev
Thanks for your reply and the solution. Using %idenity is a good workaround for type casting Js.t({}) to ReasonML record.
Let me know if its a good idea to keep this issue open for a while for discussions?
Thanks Prateek
@Prateek13727 No problem. Prolly makes sense to create an issue in reason-react
repo as well.
As a side note, in one of the early versions of reason-react
event target was properly typed as Dom.eventTarget
but IIRC it was changed b/c it was quite non-trivial getting value out of it using Webapi
.
@alexfedoseev will create the issue in reason-react as well. got it! thanks for the info.
Hey Fellas,
First of all thank-you for creating a wonderful way to handle forms in Reason-React. The ppx version is even better :)
The Issue: The value type is automatically derived from the input type. This becomes an issue when my input type in the form state is something other than a string say integer
type input = {amount: int)};
The Use-case 1.) We type abc in the input field 2.) now this is tagged as an int and we can't validate this. since it is actually a string but reason is seeing it as int
Since the value comes from
event->ReactEvent.Form.target##value,
, will it make sense to keep it as a string and let the developer handle it the way he/she wants ?Please find the complete code below. Also, you can see a working version in the repo here too.
Please let me know in case of any clarifications needed / or if we are missing something here.
Cheers Prateek