How to extract the value of an Input object in Fulma F#? - f#

Question

im attempting to use Fable's Input.datetimeLocal object to receive a start date and end date input from the user. I then want to use these values as the bounds for a slider.
Here is the code:
type TimingProps =
interface end
type TimingState =
{
IsStartChecked : bool
IsEndChecked : bool
StartDate : string
EndDate : string
SliderRatio : int
}
type TimingInterface(props) =
inherit Component<TimingProps, TimingState>(props)
do base.setInitState({ IsStartChecked = false
IsEndChecked = false
StartDate = "None"
EndDate = "None"
SliderRatio = 5})
member this.toggleStartState _ =
this.setState (fun prevState _ ->
{ prevState with IsStartChecked = not this.state.IsStartChecked}
)
member this.toggleEndState _ =
this.setState (fun prevState _ ->
{ prevState with IsEndChecked = not this.state.IsEndChecked}
)
member this.setStartTime (ev : Browser.Types.Event) =
this.setState (fun prevState _ ->
let value = unbox<string> ev.currentTarget?value
{ prevState with StartDate = string value }
)
member this.setEndTime (ev : Browser.Types.Event) =
this.setState (fun prevState _ ->
let value = unbox<string> ev.currentTarget?value
{ prevState with EndDate = value }
)
member this.onSlide (ev : Browser.Types.Event) =
let value = unbox<int> ev.currentTarget?value
this.setState (fun prevState _ ->
{ prevState with SliderRatio = value }
)
override this.render () =
div [ ClassName "block" ]
[ Field.div [] [
Label.label [] [str "Start Time"]
Checkradio.checkbox
[ Checkradio.Checked this.state.IsStartChecked
Checkradio.OnChange this.toggleStartState
Checkradio.Id "checkradio-1" ]
[ str " End Competition once all users have submitted their ranking (or manually)" ]
Control.div [ ] [
if this.state.IsStartChecked then
Input.date [ Input.ValueOrDefault "dd/mm/yyyy --:--"
Input.OnChange this.setStartTime
Input.Disabled true ]
else
Input.datetimeLocal [ Input.OnChange this.setStartTime ]
]
]
Field.div [] [
Label.label [] [str "End Time"]
Checkradio.checkbox
[ Checkradio.Checked this.state.IsEndChecked
Checkradio.OnChange this.toggleEndState
Checkradio.Id "checkradio-2" ]
[ str " End Competition once all users have submitted their ranking (or manually)" ]
Control.div [ ] [
if this.state.IsEndChecked then
Input.datetimeLocal [ Input.ValueOrDefault "dd/mm/yyyy --:--"
Input.OnChange this.setEndTime
Input.Disabled true ]
else
Input.datetimeLocal [ Input.OnChange this.setEndTime ]
]
]
Field.div [] [
Slider.slider [ Slider.OnChange this.onSlide ]
div [ ]
[ str (sprintf "%A, %A, %A" this.state.SliderRatio this.state this.state.StartDate) ]
]
]
As you can see at the bottom there, in the final few lines im simply printing the value of the Timing state, just so I can see whats going on. This is what I see when I run the code :
We can see that the value of TimingState::StartDate becomes undefined.
I believe this is a problem with the implementation of the this.setStartTime and this.setEndTime functions, particularly with how I unbox the events, but I cannot find any documentation anywhere on how to properly use these constructs.
Any help is appreciated!
References:
Input Source File : https://github.com/Fulma/Fulma/blob/master/src/Fulma/Elements/Form/Input.fs

Answer 1

solved: remove the unboxing of the event value from the lambda (capture the unboxed value instead)