Search code examples
reasonrescript

Where is the documentation to write an event handler for input text box?


Originally I wanted to know:

How do I write a handler for this?

type state = string;
type action = | ChangeName(string)
let reducer = (_state, action) => switch action { | ChangeName(text) => text }
[@react.component]
let make = () => {
    let (state, dispatch) = React.usefReducer(reducer, "");
     /* What is the parameter type and how do I decode it? */
    let onChange = ??? => dispatch(ChangeText(????));  
    <input value=state onChange/>
}

Specifically, what is the parameter type for the punned onChange handler and how do I decode it?

Every reference I come across is for JS, which I'm having difficulty translating to Re.

EDIT The answer I found by scraping github:

let onChange = event => dispatch(ChangeName(ReactEvent.Form.target(event)##value));

Say I'd like to use another JSX element, where's the documentation? OR, is their a supposition that people coming to this from elsewhere have knowledge apriori? (I'm mostly comfortable with 'c').


Solution

  • You can get the types of all the DOM attributes from https://github.com/rescript-lang/rescript-react/blob/v0.10.1/src/ReactDOM.res

    This file contains bindings to ReScript-React's subset of DOM attributes. It has:

    onChange: ReactEvent.Form.t => unit
    

    ReactEvent.Form module is declared at https://github.com/rescript-lang/rescript-react/blob/v0.10.1/src/ReactEvent.resi#L168

    When looking for anything specific to ReScript-React, search that repo.

    Looks like you have the correct code to handle the event now. Btw, you have in some places the variant constructor ChangeName and in others ChangeText, I assume the correct one is one of those. The compiler will of course catch this too :-)