react-onclickoutside

react-onclickoutside
用户界面设计的一个重要规则是，认真评估尽可能多的用户输入。每个人都应该清楚这一点，但是有时可能很难将这样的东西实现为代码。

一个可以想象的例子是用户折叠的菜单。如果你想再次关闭它，90%的用户倾向于简单地点击网站的死区(即那些本身不会产生反应的元素)。在几乎所有的专业网站上，这是完全相同的。要关闭菜单，只需再次单击它的旁边，而不是直接在它上切换。

有一个库可以满足这类的操作，它就是response-onclickoutside，它允许我们处理实际元素之外的单击事件。

在下面的示例中，你可以看到我们如何为一个简单的h1和button实现此功能。仅当单击除这两个之外的任何内容时，console.log才会输出。处理此事件的函数必须调用handleClickOutside。

import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
 
class App extends Component {
    handleClickOutside = evt => {
        console.log('You clicked outside!')
    }
 
    render() {
        return (
            <div>
                <h1>Click outside!</h1>
                <button>Don't click me!</button>
            </div>
        )
    }
}
export default onClickOutside(App)