好玩的网站列表

1. Use case

Suppose you create your own pop up modal, or you invent your own dropdown, you will need to deal/ capture with click outside of the component. This blog will illustrate how to do so.

2. Handy instructions

2.1 Create a ref to div

render() {
    return (
        <div ref = {node => this.node = node}> </div>
    );
}

2.2 Add event listener

componentWillMount() {
    document.addEventListener('mousedown', this.handleClick, false);
}

componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick, false);
}

handleClick = (e) => {
    if (this.node.contains(e.target)) {
        // inside this component, do whatever you want
        return;
    }

    // handle outside click
    this.handleOutsideClick();
}

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 stone2paul@gmail.com