ReasonReact 0.7.0 ref example

FileBtn.re

[@react.component]
let make = (~className="", ~onSelect, ~children) => {
  let fileInputRef: ReactDOMRe.Ref.currentDomRef =
    React.useRef(None->Js.Nullable.fromOption);

  let key = React.useRef(1);

  let handleInputChange =
    React.useCallback0(event => {
      let files = ReactEvent.Form.target(event)##files;
      let file = Belt.Array.get(files, 0);
      React.Ref.setCurrent(key, React.Ref.current(key) + 1);
      switch (file) {
      | Some(f) => file->onSelect
      | None => ()
      };
    });

  let handleButtonClick =
    React.useCallback0(_ => {
      switch (Js.Nullable.toOption(React.Ref.current(fileInputRef))) {
      | Some(el) => Js.log(el)
      | None => ()
      };
      ();
    });

  <>
    <input
      type_="file"
      className="display-none"
      key={key->React.Ref.current->string_of_int}
      ref={fileInputRef->ReactDOMRe.Ref.domRef}
      onChange=handleInputChange
    />
    <button
      className
      onClick=handleButtonClick>
      children
    </button>
  </>;
};