如何在Reactjs中切换显示和隐藏元素?

用户名

如何扩展li内部存在的元素。我在选择时使用了切换

我尝试添加默认属性选择的false,然后onClick,li我确保值是否匹配然后selected应该为true并显示该特定部分,并且onClick应当折叠

是否有可能总是打开剩余的第一个下拉菜单,而单击其他下拉菜单则打开另一个下拉菜单。

目前onClick无法正常运作

这是我的代码演示


export default function App() {
  const filterAddition = X.map((item) => ({
    ...item,
    menus: item.menus.map((items) => ({
      ...items,
      selected: false
    }))
  }));

  const handleOnClick = (event) => {
    filterAddition.map((item) => {
      item.menus.map((items) => {
        if (items.El=== event.target.value) {
          return {
            ...items,
            selected: !item.selected
          };
        }
      });
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <nav className="animated bounceInDown">
        {filterAddition.map(({ menus }, idx) => {
          return menus.map(({ El, subSection, selected }, idx) => (
            <ul key={idx}>
              <li className="sub-menu" value={El} onClick={handleOnClick}>
                <a href="#settings">
                  {El}
                  <div class="fa fa-caret-down right"></div>
                </a>
                {selected && (
                  <ul>
                    {subSection.map(({ E }, i) => (
                      <li key={E}>
                        <a href="#settings">{E}</a>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            </ul>
          ));
        })}
      </nav>
    </div>
  );
}
他说

有太多改变。

  • 首先,您必须使用它useState来使组件在数据更改时具有反应性。
  • 其次,onClick必须改变。
  • 第三,尝试阅读文档,尤其是有关react挂钩,状态和生命周期的文档。

看到这个https://codesandbox.io/s/pensive-cloud-9mco1?file=/src/App.js

import React, { useState, useEffect } from "react";
import "./styles.css";

const X = [
  {
    detail1: "FirstJob",
    menus: [
      {
        Order: 1,
        El: " Record Management",
        subSection: [
          {
            E: "Check  Notification",
            Order: "CheckNotification"
          },
          {
            E: "Check  Record",
            Order: "CheckRecord"
          }
        ]
      },
      {
        Order: 2,
        El: "Management",
        subSection: [
          {
            E: "Notification",
            Order: "Notification"
          },
          {
            E: "Check",
            Order: "Check"
          }
        ]
      }
    ]
  }
];

export default function App() {
  const [state, setState] = useState(X);

  useEffect(() => {
    const filterAddition = X.map((item) => ({
      ...item,
      menus: item.menus.map((items) => ({
        ...items,
        selected: false
      }))
    }));
    setState(filterAddition);
  }, []);

  const handleOnClick = (label) => {
    const temp = JSON.parse(JSON.stringify(state));
    for(let i in temp) {
      const menus = temp[i].menus; 
      for(let j in menus) {
        const item = temp[i].menus[j];
        if(item.El === label) {
          item.selected = !item.selected;
        }
      }
    }
    setState(temp);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <nav className="animated bounceInDown">
        {state.map(({ menus }, idx) => {
          return menus.map(({ El, subSection, selected }, idx) => (
            <ul key={idx}>
              <li className="sub-menu" value={El} onClick={() => handleOnClick(El)}>
                <a href="#settings">
                  {El}
                  <div className="fa fa-caret-down right"></div>
                </a>
                {selected && (
                  <ul>
                    {subSection.map(({ E }, i) => (
                      <li key={E}>
                        <a href="#settings">{E}</a>
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            </ul>
          ));
        })}
      </nav>
    </div>
  );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angular 4中切换(显示/隐藏)元素?

如何在寓言中切换显示/隐藏元素?

如何在隐藏和显示之间切换?

错误:如何在隐藏和显示之间切换

如何在Angular的ng-template中切换显示/隐藏?

如何在ReactJS的嵌套组件中切换类

如何在 ReactJS 中切换 onClick 类?

如何在jquery中切换子元素

在隐藏和显示元素之间切换

javascript切换显示和隐藏几个div元素

如何通过命令行在Windows中切换显示/隐藏隐藏文件?

如何在多个元素上使用相同的代码切换显示/隐藏文本

如何根据从下拉列表中选择的值在显示和隐藏元素之间切换?

在SSRS中切换显示/隐藏列标题

在.hta中切换隐藏/显示表td

切换隐藏/显示元素 VueJS?

如何使用jQuery在HTML中切换隐藏/显示最接近的UL?

如何切换显示和隐藏 UITextField 的 LeftView/RightView?

如何在Swift中切换UITextField安全文本输入(隐藏密码)?

如何在两个按钮中切换活动类并使用jQuery隐藏div?

如何在单击和隐藏之间切换

如何在隐藏和查看密码之间切换

HTML 切换显示和隐藏

单击按钮时如何在ReactJS中切换类名?

如何创建隐藏/显示切换

tailwindcss:如何在浏览器调整大小时隐藏和显示(切换)带有媒体查询的 html 元素?

如何在选择中切换所有元素的类?

如何在Angular 2中切换单击单个元素CSS类?

如何在React中的.map()函数中切换单个元素的CSS类