2019-09-02
描述
一个 hook,可以处理包装在组建外部的点击事件。
- 创建一个自定义的 hook,使用
ref
和callback
来处理click
事件 - 使用
React.useEffect()
hook 来添加或清除click
事件 - 使用
React.useRef()
hook 为你的点击组建创建一个ref
,并将他作为参数传递给useClickInside
hook
实现
const useClickOutside = (ref, callback) => { const handleClick = e => { if (ref.current && !ref.current.contains(e.target)) { callback(); } }; React.useEffect(() => { document.addEventListener('click', handleClick); return () => { document.removeEventListener('click', handleClick); }; }); };
使用
const ClickBox = ({ onClickOutside }) => { const clickRef = React.useRef(); useClickOutside(clickRef, onClickOutside); return ( <div className="click-box" ref={clickRef} style={{ border: '2px dashed orangered', height: 200, width: 400, display: 'flex', justifyContent: 'center', alignItems: 'center' }} > <p>Click out of this element</p> </div> ); }; ReactDOM.render( <ClickBox onClickOutside={() => alert('click outside')} />, document.getElementById('root') );
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于