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)