卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章65587本站已运行4129

在门户中打开下拉列表,以便在反应中使用表

在门户中打开下拉列表,以便在反应中使用表

从“react”导入 React, { useState, useRef, useEffect };
从“react-dom”导入ReactDOM;

const PortalWrapper = React.forwardRef(({ 孩子 }, ref) => {
  const [openDropdownMenu, setOpenDropdownMenu] = useState(false);
  const [位置,setPosition] = useState({
    左:0,
    顶部:0,
    宽度:“100%”,
  });

  const dropdownRef = useRef(null);

  const handleDropdDownClick = () => {
    setOpenDropdownMenu(!openDropdownMenu);
    if (ref && ref && ref.current 中的“当前”) {
      const { 顶部、左侧、高度 } = ref.current.getBoundingClientRect();
      设置位置({
        顶部:顶部+高度,
        左边,
        宽度:`${ref.current.clientWidth}px`,
      });
    }
  };

  使用效果(()=> {
    if (openDropdownMenu && dropdownRef.current) {
      dropdownRef.current.style.top = `${position.top}px`;
      dropdownRef.current.style.left = `${position.left}px`;
      dropdownRef.current.style.display = "无";
    }
  }, [打开下拉菜单,位置]);

  返回 (
    <div ref="{ref}" classname="w-full" onclick="{handleDropdDownClick}">
      {孩子(位置)}
      {打开下拉菜单&amp;&amp;
        ReactDOM.createPortal(
          <div ref="{dropdownRef}" style="{{">
            {孩子(位置)}
          </div>,
          文档正文
        )}
    </div>
  );
});
导出默认的PortalWrapper;

 <portalwrapper ref="{dropdownRef}">
                      {()=&gt;
                        (itIsOwner(用户?.agent_role) ||
                          用户?.platform_owner) &amp;&amp; (
                          
                              处理操作更改(
                                选定的选项,
                                联系方式,
                                指数
                              )
                            }
                            选项={agentData?.map((选项)=&gt;({
                              值:选项,
                              标签:`${option.first_name}`,
                            }))}
                            占位符=“埃丝特·霍华德”
                            类名={clsx(
                              “dropdown_list !w-40 光标指针 userFilter mt-[0.4375rem]”
                            )}
                            classNamePrefix =“dropdown_list-联系人”
                            菜单位置=“固定”
                            菜单放置=“自动”
                            menuShouldScrollIntoView={false}
                            menuPortalTarget={document.body}
                          /&gt;
                        )
                      }
                    门户包装&gt;
</portalwrapper>
卓越飞翔博客
上一篇: 探索 CSS 中的 :has() 选择器
下一篇: 返回列表
留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏