React Hooks - 使用外部点击

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')
);

返回总目录

每天 30 秒系列之 React