ref.current.contains 不是 React 中的函数

Question

我在 React 中做了一个下拉切换。我的下拉菜单工作得很好。但是当我尝试在下拉菜单外部单击时关闭下拉菜单。它显示错误。我使用 ref 来查找容器元素。示例代码


class Search extends React.Component{
    constructor()
    {
        super()
        this.state={
            notificationStatus:false,
            isFocus:false


        }
        this.container=React.createRef()
    }
    toggleNotification=()=>
    {
        this.setState({notificationStatus:!this.state.notificationStatus});
    }

    componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
      }
      componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
      }
      handleClickOutside = event => {
          if(this.container.current)
          {
        if (this.container.current && !this.container.current.contains(event.target)) {
          this.setState({
            notificationStatus: false,
          });
        }
    }
      };
    render()
    {
        const {isFocus,notificationStatus}=this.state;
        return(
            <div>
                    <div className="col-md-1 col-sm-1 bell-container flex all-center relative">
                        <img src={bell} onClick={this.toggleNotification} alt="bell icon" />
                    </div>
                {
                    notificationStatus ?  <NotificationList ref={this.container} /> : null
                    
                }
                
            </div>

            
        )
    }
}

Answer 1

在 NotificationList 组件上添加 ref 不会为您提供其中呈现的 DOM 元素的引用，您需要将 ref 传递给 div 在 NotificationList

之内
<NotificationList innerRef={this.container} />

并在 NotificationList

class NotificationList extends React.Component { render() { <div ref={this.props.innerRef}>{/* */}</div> } }

P.S。一个简短的解决方案是使用 ReactDOM.findDOMNode(this.container.current) 但不再建议在 React
中使用它

Answer 2

您应该删除嵌套的 if

handleClickOutside

方法，如下正确即可

      handleClickOutside = event => {
    if (this.container.current && !this.container.current.contains(event.target))               {
      this.setState({
        notificationStatus: false,
      });
    }
}

ref.current.contains 不是 React 中的函数

ref.current.contains is not a function in React

typescript

reactjs

react-dom