search

purescript-contrib / purescript-react

React Bindings for PureScript
MIT License
400 stars 65 forks source link

How can I access event.target.value? #158

Open omefire opened 6 years ago

omefire commented 6 years ago

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 6 years ago

You should be able to pass the evt right to the target function https://github.com/purescript-contrib/purescript-react/blob/e059debf49515721537a109986dabeae70fe8284/src/React/SyntheticEvent.purs#L272-L273

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

Hope this helps.

natefaubion commented 6 years ago

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

Jwhiles commented 6 years ago

@natefaubion Would a correct implementation of this look similar to this? https://github.com/purescript-contrib/purescript-react/blob/e059debf49515721537a109986dabeae70fe8284/src/React/SyntheticEvent.purs#L359-L360

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