在 React 组件中聚焦输入字段 - 尝试创建 ref 时出现类型错误答案

【问题标题】：Focusing an input field in a React component – getting type error trying to create a ref在 React 组件中聚焦输入字段 - 尝试创建 ref 时出现类型错误
【发布时间】：2017-12-21 16:23:00
【问题描述】：

我有一个包含文本元素的 React 组件。安装组件后，我希望在输入字段中设置文本光标，即我希望文本输入元素具有焦点。

在“传统”JavaScript React 组件中，我会通过 ref 获取输入字段的 DOM 元素，然后调用其 focus 方法。

我已经阅读了解释如何在 Reason-React 中使用 refs 的文档：https://github.com/reasonml/reason-react/blob/master/docs/react-ref.md

唉，这个页面上包含的代码示例是针对自定义组件的引用，它只提到它也适用于 React DOM 元素。

所以我尝试将示例代码转换为 React DOM 元素，这是我迄今为止尝试过的：

type state = {
  text: string,
  inputElement: ref(option(Dom.element))
};

let valueFromEvent = (evt) : string => (
  evt
  |> ReactEventRe.Form.target
  |> ReactDOMRe.domElementToObj
)##value;

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

let setInputElement = (theRef, {ReasonReact.state}) =>
  state.inputElement := Js.Nullable.to_opt(theRef);

let make = (~initialText, ~onSubmit, _) => {
  ...component,
  initialState: () => {text: initialText, inputElement: ref(None)},
  reducer: (newText, state) => ReasonReact.Update({...state, text: newText}),
  render: ({state: {text}, reduce, handle}) =>
    <input
      value=text
      _type="text"
      ref=(handle(setInputElement))
      placeholder="Todo description"
      onChange=(reduce((evt) => valueFromEvent(evt)))
      onKeyDown=(
        (evt) =>
          if (ReactEventRe.Keyboard.key(evt) == "Enter") {
            onSubmit(text);
            (reduce(() => ""))()
          } else if (ReactEventRe.Keyboard.key(evt) == "Escape") {
            onSubmit(initialText);
            (reduce(() => ""))()
          }
      )
    />
};

我得到的错误信息是这样的：

We've found a bug for you!
/Users/pahund/git/todo-list-reason-react/src/EditTodoField.re 21:11-35

19 ┆ value=text
20 ┆ _type="text"
21 ┆ ref=(handle(setInputElement))
22 ┆ placeholder="Todo description"
23 ┆ onChange=(reduce((evt) => valueFromEvent(evt)))

This has type:
  ReasonReact.Callback.t(Js.Nullable.t(Dom.element)) (defined as
    (Js.Nullable.t(Dom.element)) => unit)
But somewhere wanted:
  (Js.null(Dom.element)) => unit

The incompatible parts:
  Js.Nullable.t(Dom.element) (defined as Js.nullable(Dom.element))
  vs
  Js.null(Dom.element)

我知道问题可能在于我如何在代码开头定义状态的类型，对于 DOM 元素和自定义组件是不同的。

修复错误的正确类型定义是什么？

完整的项目可以在 GitHub 上找到：https://github.com/pahund/todo-list-reason-react/tree/ref-problem

【问题讨论】：

标签： dom types compiler-errors reason reason-react

【解决方案1】：

我认为你的理性反应依赖已经过时了。 refs 在 0.3.0 中从 Js.null(Dom.element) 更改为 Js.nullable(Dom.element)。见https://github.com/reasonml/reason-react/blob/master/HISTORY.md#030

如果由于某种原因你不能或拒绝升级，你可以改用Js.Null.to_opt :)

（另外，如果您进行升级，您可以使用Js.toOption 作为一个不错的快捷方式来代替Js.Nullable.to_opt）

【讨论】：