admin管理员组文章数量:1323335
I have this event listener in React:
document.removeEventListener("mouseup", this.handleDocumentClick);
This is one of the definitions of this method as per Flow's source code:
removeEventListener(type: MouseEventTypes, listener: MouseEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
It seems the listener must be of type MouseEventListener
:
type MouseEventHandler = (event: MouseEvent) => mixed
type MouseEventListener = {handleEvent: MouseEventHandler} | MouseEventHandler
So it seems that I can type it like this:
handleDocumentClick = (evt: MouseEvent) => {
}
So far, no Flow errors. Now, I want to check if the event's target is inside another DOM node that I have stored in a React Ref:
$menu: React.ElementRef<typeof Menu>;
handleDocumentClick = (evt: MouseEvent) => {
if (this.$menu !== null) {
const menu = ReactDOM.findDOMNode(this.$menu);
if (menu) {
console.log(menu.contains(evt.currentTarget));
}
}
}
And I get this error:
54: console.log(menu.contains(evt.currentTarget));
^^^^^^^^^^^^^^^^^ EventTarget. This type is inpatible with the expected param type of
447: contains(other: ?Node): boolean;
^^^^ Node. See lib: /private/tmp/flow/flowlib_3e761601/dom.js:447
The contains
method should work for the target of an event (which is a DOM node). What could be wrong here – perhaps the definition of contains
in Flow?
I have this event listener in React:
document.removeEventListener("mouseup", this.handleDocumentClick);
This is one of the definitions of this method as per Flow's source code:
removeEventListener(type: MouseEventTypes, listener: MouseEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;
It seems the listener must be of type MouseEventListener
:
type MouseEventHandler = (event: MouseEvent) => mixed
type MouseEventListener = {handleEvent: MouseEventHandler} | MouseEventHandler
So it seems that I can type it like this:
handleDocumentClick = (evt: MouseEvent) => {
}
So far, no Flow errors. Now, I want to check if the event's target is inside another DOM node that I have stored in a React Ref:
$menu: React.ElementRef<typeof Menu>;
handleDocumentClick = (evt: MouseEvent) => {
if (this.$menu !== null) {
const menu = ReactDOM.findDOMNode(this.$menu);
if (menu) {
console.log(menu.contains(evt.currentTarget));
}
}
}
And I get this error:
54: console.log(menu.contains(evt.currentTarget));
^^^^^^^^^^^^^^^^^ EventTarget. This type is inpatible with the expected param type of
447: contains(other: ?Node): boolean;
^^^^ Node. See lib: /private/tmp/flow/flowlib_3e761601/dom.js:447
The contains
method should work for the target of an event (which is a DOM node). What could be wrong here – perhaps the definition of contains
in Flow?
2 Answers
Reset to default 8 +100You have a couple options, the easiest of which is probably just:
handleDocumentClick = (evt: MouseEvent) => {
if (this.$menu !== null) {
const menu = ReactDOM.findDOMNode(this.$menu);
if (menu && evt.currentTarget instanceof Node) {
console.log(menu.contains(evt.currentTarget));
}
}
}
But you can always cast currentTarget
(you can cast to Node
, but you'll need to cast to any
first):
handleDocumentClick = (evt: MouseEvent) => {
if (this.$menu !== null) {
const menu = findDOMNode(this.$menu)
if (menu) {
// console.log(menu.contains(((evt.currentTarget: any): Node)))
console.log(menu.contains((evt.currentTarget: any)))
}
}
}
The first option will protect in case you end up with some weird edge case (and you could always add a utility function like isNode
or something to use repeatedly).
The property currentTarget is inherited from Event, which can have references to types other than Node.
本文标签: javascriptReact Flowtype Nodecontains() Event TargetStack Overflow
版权声明:本文标题:javascript - React Flowtype Node.contains() Event Target - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742137855a2422448.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论