purescript-contrib/purescript-react

How can I access event.target.value?

omefire opened this issue · 3 comments

I am using the purescript-react library to create an app.

I am trying to handle an onChange event on an input element:

input [ Props.onChange $ \evt -> do

...

]

I want to access evt.target.value (as I would in Javascript).

Here's what the types look like:

type SyntheticInputEvent = SyntheticEvent_ (SyntheticUIEvent' ( SyntheticEvent' () ))

foreign import data SyntheticEvent_ :: # Type -> Type

type SyntheticUIEvent' r = (detail :: Number, view :: NativeAbstractView | r)

type SyntheticEvent' r = (bubbles :: Boolean, target :: NativeEventTarget, ... | r)

I have tried doing the following:

input [ Props.onChange $ evt -> do

let SyntheticEvent_ (SyntheticUIEvent' { detail: detail, view: view, target: target }) = evt

...

]

But that doesn't work.

Any suggestions?

ethul commented

You should be able to pass the evt right to the target function

target :: forall r. SyntheticEvent_ (target :: NativeEventTarget | r) -> Effect NativeEventTarget
target = get (SProxy :: SProxy "target")

This would give you a NativeEventTarget, which at the moment you can unsafe coerce to get the value property.

Hope this helps.

I think NativeEventTarget is technically opaque, since it can vary by platform. I think it'd be worth providing conversions in react-dom though.

@natefaubion
Would a correct implementation of this look similar to this?

propertyName :: forall r. SyntheticEvent_ (propertyName :: String | r) -> Effect String
propertyName = get (SProxy :: SProxy "propertyName")

I'm happy to make a PR adding it if so.