reactjs - 单击模式本身时，处理外部单击将关闭。当点击模态之外的任何地方时基本上不应该关闭

Question

这段代码以前对我有用，但我不确定我尝试使用它的其他组件发生了什么变化。

我尝试过使用钩子(Hook)来打开和关闭模式，并且只是简单地单击事件监听器，但两次它都会在单击页面上的任意位置时关闭。

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 。如果用户在模态目标的外部和内部单击，这将允许您控制模态的切换。

有很多复杂的方法可以实现这一目标。然而，由于我们在这里处理钩子(Hook)，所以最好使用自定义钩子(Hook)。

介绍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
}

观看此Demo in CodeSandBox所以你可以看到这是如何使用钩子(Hook)实现的。

欢迎来到 StackOverflow!