当我点击body外部时，边栏菜单不应该被折叠/关闭

Question

事实上，我面临着一个问题，即当我点击外部任何位置时，我不希望侧边栏菜单的菜单关闭。现在，当我点击任何位置时，它都会被折叠/关闭。

这是我的方法，当用户点击身体之外的任何地方时，它都会感应。

import React, { Component } from "react";
class WatchClickOutside extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
componentWillMount() {
console.log('in comp mount');
document.body.addEventListener('click', this.handleClick);
}
componentWillUnmount() {
console.log('in comp unmount');
document.body.removeEventListener('click', this.handleClick);
}
handleClick(event) {
let { container } = this.refs;
const { onClickOutside } = this.props;
const { target } = event;
if (typeof onClickOutside !== 'function') {
console.log(' in if of onclickoutside');
return;
}
if (target !== container && !container.contains(target)) {
console.log('clicked outside - fire callback');
onClickOutside(event); // clicked outside - fire callback
}
}
render() {
return (
<div ref="container">
{this.props.children}
</div>
);
}
}
export default WatchClickOutside;

这是我呈现侧边栏的代码。

import React, { Component } from 'react';
import WatchClickOutside from './watch-outside';

class Sidebar extends Component {
handleClickOutside = (e) => {
console.log(e);
**//WHAT SHOULD I DO HERE TO RESTRICT THE CLOSE OF SIDEBAR ONCLICK**
}
render() {
return (
<div>
<WatchClickOutside onClickOutside={this.handleClickOutside}>
<Nav vertical className="sidebar">
<UncontrolledDropdown nav inNavbar className="manage-profile">
<DropdownToggle nav caret className="nav-link" aria-hidden="true">
SIDEBAR
</DropdownToggle>
<DropdownMenu>
**//DROPDOWN MENU HERE**
</DropdownMenu>
</Nav>
</UncontrolledDropdown>
</WatchClickOutside>
</div>
);
}
}
export default Sidebar;

Answer 1

很难说您的自定义组件是如何处理点击的，但您可以尝试一些方法。

1:

e.preventDefault()
e.stopPropagation()

handleClickOutside内部

2:

处理mouseDown而不是click事件并调用上面的函数也会有所帮助。

3:

在Nav内部处理来自(1(和(2(的事件，而不是封装到侦听主体的父组件中。一旦点击进入正文，它们就已经从原点开始冒泡了，所以很可能是Nav通过关闭侧边栏来处理的。最重要的是，您希望处理更接近其初始来源的事件。

我认为你应该先从(3(开始。