Reactjs 使用菜单项下拉列表和菜单项活动状态对Js/Menu作出反应

您好，我有一个标签结构的菜单，其中一些菜单项将被下拉

然后我创建了一个状态数组来存储我的所有菜单项，当一个菜单项被单击时，它需要为真，而其他所有菜单项都为假，也就是说，在这个数组中，只有一个菜单项可以为真，我可以显示我的下拉菜单项，甚至可以对我的活动菜单项应用css效果，但由于某些原因，我的状态在单击时从未更改为真：

代码：

const MenuItem=（{tag，visibleMenu}）=>{
const{name，link，dropdownItems}=tag；
返回(

))}
) : (
""
)}
);
};
const MenuBar=props=>{
常量菜单=[
{
姓名：“家”，
链接：“/”，
下拉项：[
{名称：“一”，链接：“/aa”}，
{name:“two”，链接：“/b/”}
]
},
{
姓名：“关于”，
链接：“../abovisiblemenut”，
下拉项：[
{名称：“一”，链接：“/aa”}，
{name:“two”，链接：“/b/”}
]
},
{name:“非下拉”，链接：“../dashboard”}，
{name:“非下拉”，链接：“../dashboard/about”}
];
常量[VisibleMenus，SetVisibleMenus]=useState(
MenuTags.reduce（（r，e）=>（（r[e.name]=false），r），{}）
),
onUpdateVisibility=项目=>{
常量visibleMenuCopy={…visibleMenu}；
Object.key（visibleMenuCopy）.forEach(
键=>（visibleMenuCopy[key]=键===项）
);
设置VisibleMenus（visibleMenuCopy）；
};
console.log（visibleMenu）；
返回(
{MenuTags.map（项=>(
ONUpdate可见性（项目）}
/>
))}

props.setOpenBox（！props.isOpen）}
className=“searchIcon”
旋转={90}
icon={faSearch}
size=“1x”
固定宽度
color=“rgba（0,0,0,0.08）；”
/>

);
};

例如：

我认为我的问题在于我的状态：

  const [visibleMenu, setVisibleMenu] = useState(
      MenuTags.reduce((r, e) => ((r[e.name] = false), r), {}),
    ),
    onUpdateVisibility = item => {
      const visibleMenuCopy = { ...visibleMenu };
      Object.keys(visibleMenuCopy).forEach(
        key => (visibleMenuCopy[key] = key === item),
      );
      setVisibleMenu(visibleMenuCopy);
    };
      {MenuTags.map(item => (
        <MenuItem
          tag={item}
          visibleMenu={visibleMenu}
          onClick={() => onUpdateVisibility(item)}
        />
      ))}

const[VisibleMenus，SetVisibleMenus]=useState(
MenuTags.reduce（（r，e）=>（（r[e.name]=false），r），{}），
),
onUpdateVisibility=项目=>{
常量visibleMenuCopy={…visibleMenu}；
Object.key（visibleMenuCopy）.forEach(
key=>（visibleMenuCopy[key]=key==项），
);
设置VisibleMenus（visibleMenuCopy）；
};
{MenuTags.map（项=>(
ONUpdate可见性（项目）}
/>
))}

---

但这是我发现的唯一一种在单击时只使一个状态为真的方法。问题是事件处理程序位于一个没有返回任何具体HTML元素的组件上

MenuTag

返回

NavLI

，这是一个样式化组件，返回一个li。我并不精通样式组件，但我认为一般来说，事件处理程序需要附加到DOM元素，而不是抽象组件

另外，我认为你可以大大简化这一点。那么这个呢：

const[visible，setVisible]=useState（'none'），
{MenuTags.map（（项目，索引）=>(
setVisible（索引）}
/>
))}

这意味着在这个组件中，我们使用

visible

state变量跟踪哪个项目是可见的，它将是可见项目的索引。

onClick

处理程序将此值更改为单击项的索引。然后，您的道具

visibleMenu

将检查此情况，确保该

菜单标记的索引与状态中的索引相同

编辑
我改变了一些事情。我们不需要从MenuItem中控制状态，只需将一些道具传递给MenuItem，并在MenuItem的子组件NavLI中控制它们，NavLI接受事件处理程序


const MenuBar=props=>{
const[visible，setVisible]=useState（'none'）
console.log（可见）；
返回(
{MenuTags.map（（项目，索引）=>(
))}
//纳夫利内部
const MenuItem=（{tag，visibleMenu，setVisible，index}）=>{
...
返回(
{console.log（索引）；setVisible（索引）}
onMouseLeave={（）=>{setVisible（'none'）}>
...

我将处理程序更改为
onMouseEnter
和
onMouseLeave
onClick
将起作用，但您需要一个全局事件处理程序将页面设置为
setVisible
返回到“none”，这样，当您单击页面上的任何其他位置时，选项卡都会关闭。这其中有更多的细微差别，但我的示例应该起作用

主要点是否能够确定（处于状态）哪个链接对象处于活动状态/哪个下拉菜单处于打开状态？是的，主要点是使用该状态打开下拉菜单，并确定哪个菜单项当前处于活动状态（即打开哪个页面以向该项添加css效果）因此，该数组中只有一项为真其余为假恢复设置的这一部分对任何人都不可见我感到困惑我无法想象我该怎么做能帮我吗？我编辑了我的答案，并为您制作了一个工作代码沙盒。如果您不介意对导航栏使用现成的解决方案，如您正在尝试创建的，我会签出，这是有你想要的功能。非常感谢兄弟我设法做了一些事情来使用手柄点击非常感谢你的帮助
  const [visibleMenu, setVisibleMenu] = useState(
      MenuTags.reduce((r, e) => ((r[e.name] = false), r), {}),
    ),
    onUpdateVisibility = item => {
      const visibleMenuCopy = { ...visibleMenu };
      Object.keys(visibleMenuCopy).forEach(
        key => (visibleMenuCopy[key] = key === item),
      );
      setVisibleMenu(visibleMenuCopy);
    };
      {MenuTags.map(item => (
        <MenuItem
          tag={item}
          visibleMenu={visibleMenu}
          onClick={() => onUpdateVisibility(item)}
        />
      ))}