react 点击空白区域隐藏组件或按钮

引用# react hooks 点击空白区域隐藏组件

1. hooks

const [moreList, toggleMoreList] = useState(false)
useEffect(() => {
  // 在 document 上绑定点击事件，隐藏弹出层
  document.addEventListener("click", (e) => toggleMoreList(false));
}, [])
// 封装后的阻止冒泡功能
const stopPropagation = (e) => {
  e.nativeEvent.stopImmediatePropagation();
}
const onShow = (e) => {
  // 使用 react 的 e.stopPropagation 不能阻止冒泡，需要使用 e.nativeEvent.stopImmediatePropagation，这里我们对其进行封装，方便多次调用
  stopPropagation(e);
  toggleMoreList(!moreList)
}

// 按钮
<button onClick={onShow}>
    点击更多
</button>
// 弹框
<div style={{display: `${moreList ? 'block' : 'none'}`}}>
  <ul role="menu" tabIndex="-1" className="cpJjC _g z">
    <li role="none">
    </li>
  </ul>
</div>

2.class

this.state={
  showInput:false
}
componentDidMount() {
  document.addEventListener('click', (e) => {
  this.setState({
    showInput: false,
  })
 })
}

stopPropagation = (e) => {
  e.nativeEvent.stopImmediatePropagation();
}

onShow = (e) => {
  console.log(123)
  // 使用 react 的 e.stopPropagation 不能阻止冒泡，需要使用 e.nativeEvent.stopImmediatePropagation，这里我们对其进行封装，方便多次调用
  this.stopPropagation(e);
  this.setState({
    showInput: !this.state.showInput
  })
}

render() {
  const { showInput } = this.state
  return(
      <>
        <div onClick={(e) => this.onShow(e)}> 点击更多 </div>
        <div style={{display: `${showInput ? 'block' : 'none'}`}}
        )>
    </>
)}