Question

我在React中有这个事件监听器：

document.removeEventListener("mouseup", this.handleDocumentClick);

根据Flow's source code：

，这是此方法的定义之一

removeEventListener(type: MouseEventTypes, listener: MouseEventListener, optionsOrUseCapture?: EventListenerOptionsOrUseCapture): void;

听众似乎必须是MouseEventListener的类型：

type MouseEventHandler = (event: MouseEvent) => mixed
type MouseEventListener = {handleEvent: MouseEventHandler} | MouseEventHandler

所以我似乎可以这样打字：

handleDocumentClick = (evt: MouseEvent) => {

}

到目前为止，没有Flow错误。现在，我想检查事件的目标是否在我存储在React Ref中的另一个DOM节点内：

$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));
        }
    }
}

我收到了这个错误：

 54:                     console.log(menu.contains(evt.currentTarget));
                                                   ^^^^^^^^^^^^^^^^^ EventTarget. This type is incompatible with the expected param type of
447:   contains(other: ?Node): boolean;
                        ^^^^ Node. See lib: /private/tmp/flow/flowlib_3e761601/dom.js:447

contains方法应该适用于事件的目标（DOM节点）。这里可能有什么问题 - 也许是Flow中contains的定义？

Answer 1

你有两个选择，其中最简单的可能就是：

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));
        }
    }
}

但是你总是可以投射currentTarget（你可以投射到Node，但你需要先投射到any：

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)))
        }
    }
}

第一个选项将保护，以防你最终遇到一些奇怪的边缘情况（你总是可以添加一个实用功能，如isNode或其他东西重复使用。）

Answer 2

属性currentTarget继承自Event，它可以引用Node以外的类型。

React Flowtype Node.contains（）事件目标

2 个答案: