Kevin Meredith
Kevin Meredith

Reputation: 41909

Unable to Type in <input>

Given:

LoginUsername.re

let component = ReasonReact.statelessComponent("LoginUsername");

let make = (~value: string, _children) => {
  ...component,
  render: (_) =>
    <div>
        <label htmlFor="username">{ReasonReact.string("User Name")}</label>
        <input type_="text" name="username" value=value/>
    </div>
};

LoginPassword.re

let component = ReasonReact.statelessComponent("LoginPassword");

let make = (~value, _children) => {
  ...component,
  render: (_) =>
    <div>
        <label htmlFor="password">{ReasonReact.string("Password")}</label>  
        <input type_="password" name="password" value=value/>
    </div>
};

Login.re

let component = ReasonReact.statelessComponent("Login");

let make = (~username: string, ~password: string, _children) => {
  ...component, 
  render: (_) =>
    <div>
      <h1>{ReasonReact.string("Log in")}</h1>
      <div><LoginUsername key=username value=username/></div>
      <div><LoginPassword key=password value=password/></div>
    </div>
};

Index.re

ReactDOMRe.renderToElementWithId(<Login username="" password=""/>, "index1");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ReasonReact Examples</title>
</head>
<body>
  Component 1:
  <div id="index1"></div>
  <script src="../build/Index.js"></script>
</body>
</html>

Why does no text appear when I type in either <input>?

enter image description here

Upvotes: 0

Views: 61

Answers (1)

Boyswan
Boyswan

Reputation: 224

Input will never update, you need a mechanism to call onChange, store the value and pass it back into the input. Currently the value will always be "", as nothing overrides it.

You can use a reducer component to achieve this:

type state = {input: string};

type action =
  | UpdateInput(string);

let component = ReasonReact.reducerComponent("Input");

let make = _children => {
  ...component,
  initialState: () => {input: ""},
  reducer: (action, _state) =>
    switch (action) {
    | UpdateInput(input) => ReasonReact.Update({ input: input })
    },
  render: ({state, send}) =>
    <input
      onChange=(e => send(UpdateInput(e##target##value)))
      value=state.input
    />,
};

Upvotes: 2

Related Questions