【CSS】自定义下拉框

嘻嘻的妙妙屋

已于 2022-06-23 10:20:41 修改

阅读量1k

点赞数

分类专栏：前端文章标签： css javascript 前端 react sass

于 2022-06-23 10:16:11 首次发布

本文链接：https://blog.csdn.net/jessieeeeeee/article/details/125330592

版权

自定义下拉框

效果

在这里插入图片描述

index.tsx

import {
   useState, useEffect} from 'react'
import {
   observer} from 'mobx-react-lite'
import styles from './index.module.scss'
import recordStore from 'src/store/recordStore'

const DropDownBox: React.FC = props => {
   
  // 查询月份下拉框
  const [dropDown, setDropDown] = useState(false)	// 默认下拉框为关闭状态
  const handleOpen = (e: any) => {
   
    e.stopPropagation()		// 禁止事件冒泡
    e.nativeEvent.stopImmediatePropagation()	// 阻止监听同一事件的其他事件监听器被调用
    setDropDown(!dropDown)	// 将下拉框设为打开状态
  }
  useEffect(() => {
   
  	// 点击空白处关闭下拉框
    document.body.addEventListener('click', () => {
   
      setDropDown(false)
    })
    return () => {
   
      document.body.removeEventListener('click', () => {
   
        setDropDown(false)
      })
    }
  }, [])
  const selectMonth = (e: any