react中如何实现下拉菜单

react中如何实现下拉菜单

思路：
 1点击某个特定区域展示下拉框,点击其他任意区域隐藏下拉框
 2选择某个选项隐藏下拉框,再次打开时滚动到选中的选项

html部分

<div className={styles.staticDep}>
  <span className={styles.label}>统计单位</span>
  <div ref={selectRef} onClick={() => setIsShow(!isShow)} className={styles.value}>
    <span>{selectData1.name}</span>
    {isShow1 ? (
    <div className={[styles.selectList, styles.selectList].join(' ')}>
      {statisDepData.map((item) => (
      <div
           onClick={handleChange(item)}
           key={item.id}
           className={[
           styles.listItem,
           item.id === selectData.id ? styles.selectItem : '',
           ].join(' ')}
           >
        {item.name}
      </div>
      ))}
    </div>
    ) : (
    ''
    )}
  </div>
</div>

逻辑部分

const selectRef = useRef<HTMLDivElement | null>(null);
const [isShow, setIsShow] = useState<boolean>(false);
// 记录选中的数据
const [selectData, setSelectData] = useState<ItemData>({
  name: '',
  id: null as any,
});

// 监听body的点击事件
useEffect(() => {
    const handleSelect = (e: any) => {
      // 判断某个元素是否包含另一个元素
      const result = findDOMNode(selectRef.current as HTMLDivElement)?.contains(e.target);
      if (!result) {
        setIsShow(false);
      }
    };
    document.body.addEventListener('click', handleSelect);
    return () => {
      document.body.removeEventListener('click', handleSelect);
    };
  }, []);

	// 记录选中的菜单项
	const handleChange = (data: ItemData) => () => {
    if (data.id !== selectData.id) {
      setSelectData(data);
    }
    setIsShow(false);
  };


	// 再次打开时候如何滚到选中的选项
	useEffect(() => {
    if (!checkDeptIdData.length) return;
    // 找到选中的id所对应的下标
    const index = checkDeptIdData.findIndex((item) => item.id === selectData.id);
    // 38是每个选项的高度
    const scrollTop = index * 38;
    // 这里是我自己的一个处理，下标大于6我才需要滚动条滚动，可有可无看自己
    if (selectDomRef.current && index > 6) {
      selectDomRef.current.scrollTop = scrollTop;
    }
  }, [isShow]);