在 React 组件中聚焦输入字段——尝试创建 ref 时出现类型错误
Focusing an input field in a React component – getting type error trying to create a ref
我有一个包含文本 元素的 React 组件。当组件被挂载时,我希望在输入字段中设置文本光标,即我希望文本输入元素具有焦点。
在“传统”JavaScript React 组件中,我会通过 ref 获取输入字段的 DOM 元素,然后调用它的 focus
方法。
我已经阅读了解释如何在 Reason-React 中使用引用的文档: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
我认为你的原因-反应依赖已经过时了。 ref
在 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
的快捷方式)
我有一个包含文本 元素的 React 组件。当组件被挂载时,我希望在输入字段中设置文本光标,即我希望文本输入元素具有焦点。
在“传统”JavaScript React 组件中,我会通过 ref 获取输入字段的 DOM 元素,然后调用它的 focus
方法。
我已经阅读了解释如何在 Reason-React 中使用引用的文档: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
我认为你的原因-反应依赖已经过时了。 ref
在 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
的快捷方式)