单击模态本身时，句柄外部单击关闭。在模态之外的任何地方单击时基本上不应该关闭

Question

这段代码以前对我有用，但我不确定我正在尝试使用它的另一个组件中发生了什么变化。

我试过使用钩子来打开和关闭模态，只是简单地点击事件监听器，但两次点击页面上的任何地方都会关闭。

componentDidMount() {
    document.addEventListener('click', this.handleOutsideClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleOutsideClick);
  }

  handleOutsideClick = (e) => {
    if (this.state.showInfoModal && !this.node.contains(e.target)) this.handleInfoToggle();
    console.log(this.state.showInfoModal, e.target, this.node, 'clicked outside');
  }

  handleInfoToggle = (event) => {
    const { showInfoModal } = this.state;

    if (event) event.preventDefault();
    this.setState({ showInfoModal: !showInfoModal });
  };

renderSomething = (args) => {
 return(
   <span ref={(node) => { this.node = node; }}>
   {something === true && <span className={styles.somethingelse}> 
   <HintIcon onClick={this.handleInfoToggle} /></span>}
    <Modal visible={showInfoModal} onCancel={this.handleInfoToggle}>
     some information to show
    </Modal>
   </span>
  )
}

render() => {
  return (
   {this.renderSomething(args)}
  )
}

不确定这是否足够信息。但这让我发疯。

我还尝试添加有人建议的 dontCloseModal 函数：

  dontCloseModal = (e) => {
    e.stopPropagation();
    console.log(e);
    this.setState({
      showInfoModal: true
    });
  }

 <div onClick={this.dontCloseModal}></div>

(((这将绕过<Modal/>组件)))

  const refs = React.createRef(); // Setup to wrap one child
  const handleClick = (event) => {
    const isOutside = () => {
      return !refs.current.contains(event.target);
    };
    if (isOutside) {
      onClick();
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleClick);

    return function() {
      document.removeEventListener('click', handleClick);
    };
  });

  return (element, idx) => React.cloneElement(element, { ref: refs[idx] });
}

export default ClickOutside;

尝试使用这样的组件 ^^ 并添加<ClickOutside onClick={this.closeInfoModal()}></ClickOutside> 但与此相同的问题 - 单击任何地方（包括模态内部）时关闭

Answer 1

稍微玩玩这个之后，似乎你也应该useRef在这里。如果用户在模态目标的外部和内部单击，这将允许您控制切换模态。

有很多复杂的方法可以实现这一点。但是，由于我们在这里处理钩子，因此最好使用自定义钩子。

介绍useOnClick：

// Custom hook for controling user clicks inside & outside
function useOnClick(ref, handler) {
    useEffect(() => {
        const listener = event => {
            // Inner Click: Do nothing if clicking ref's element or descendent elements, similar to the solution I gave in my comment stackoverflow.com/a/54633645/4490712 
            if (!ref.current || ref.current.contains(event.target)) {
                return;
            }
            // Outer Click: Do nothing if clicking wrapper ref
            if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
                return;
            }

            handler(event);
        };

        // Here we are subscribing our listener to the document
        document.addEventListener("mousedown", listener);

        return () => {
            // And unsubscribing it when we are no longer showing this component
            document.removeEventListener("mousedown", listener);
        };
    }, []); // Empty array ensures that effect is only run on mount and unmount
}

在 CodeSandBox 中观看此演示，以便您了解如何使用钩子实现这一点。

欢迎使用 StackOverflow！