React Ref 中出现的错误：Uncaught TypeError: .includes 不是一个函数。

Question

我正试图制作一个菜单，当点击它时会显示出来。这个很好用。但是我希望在选择了原始菜单或项目列表以外的任何内容时，菜单都能关闭。然而，这样做会返回错误。

Uncaught TypeError: _this.dropdownMenu.includes is not a function
    at HTMLDocument.eval (FeedItem.jsx:277)

可视化

代码

import React, { Component } from 'react'
import styled from 'styled-components';

const OptionMenu = styled.div `
    position: absolute;
    top: 20px;
    left: -130px;
    display: ${props => props.showMenu ? 'flex' : 'none'};
    flex-direction: column;
    width: 150px;
    background: #FFFFFF;
    border: 1px solid #EEEFEF;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    z-index: 100;
`;

const OptionItem = styled.div `
    color: #414141;
    font-size: 18px;
    cursor: pointer;
    padding: 10px 5px;
    transition: .2s;

    &:hover {
        background-color: #F2F2F2;
    }
`;


class FeedItem extends Component {
    constructor() {
        super();

        this.state = {
            showMenu: false
        }

        this.dropdownMenu = React.createRef();
    }

    showMenu = (e) => {
        this.setState({ showMenu: true }, () => {
          document.addEventListener('click', this.closeMenu);
        });
    }

    closeMenu = (e) => {
        if(!this.dropdownMenu.includes(e.target)) {
            console.log('yes')

            this.setState({ showMenu: false }, () => {
                document.removeEventListener('click', this.closeMenu);
            });
        }
    }

    render(props) {
        const { showMenu } = this.state;

        return(
            <Container item={this.props.id}>
                    <UserOptions onClick={() => this.showMenu()} ref={this.dropdownMenu}>

                        <OptionMenu showMenu={showMenu}>
                            <OptionItem>Share</OptionItem>
                            <OptionItem>Something</OptionItem>
                        </OptionMenu>
                    </UserOptions>
            </Container>
        );
    }
}

export default FeedItem;

我正在使用styled-components，这可能会有问题吗？另外，我已删除了容器的大部分内容，只留下了存在问题的区域。

- cosmichero2025

---

“includes”是一个字符串和数组方法，而不是Node方法。也许你想要使用this.dropdownMenu.current.contains(e.target)？ - Tholle

我疯了，我本来以为我用过那个！谢谢您先生！ - cosmichero2025

Answer 1

includes是一个属于String和Array的方法，而不是一个Node方法。

你可以使用contains替代它：

closeMenu = (e) => {
    if (!this.dropdownMenu.current.contains(e.target)) {
        console.log('yes')

        this.setState({ showMenu: false }, () => {
            document.removeEventListener('click', this.closeMenu);
        });
    }
}

- Tholle