程序员经验分享-hwhale

如何让react中所有可折叠项默认打开？

2024-04-25

我使用reactstrap制作了一个带有令牌的可折叠按钮，并且按钮单击折叠一切正常。

我希望保持这种情况，但另一方面，我如何修改它以使所有可折叠按钮在页面初始渲染时打开。

访问页面时，所有令牌都需要可见，这意味着所有可折叠项目都需要打开。

如果我们给予，

this.state = {
      open: [0 , 1, 2]
    };

然后它将被打开，但对于这篇文章它将起作用，而在实际应用中我不知道确切的索引是什么，因此像这样的硬编码将不起作用。

请帮我打开所有n在初始状态下打开的可折叠数据的数量，单击按钮后，它应该像现在（打开/关闭）令牌一样。

const data = [{"orderId":1,"orderNo":"123", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3"]}] },
{"orderId":2,"orderNo":"456", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1","Token3"]}] },
{"orderId":3,"orderNo":"789", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3", "Token4"]}] }
]

const {Component, Fragment} = React;
const {Button, Collapse} = Reactstrap;

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: []
    };
  }
  
  toggle = idx => () => {
    this.setState(prevState => ({open: this.state.open.includes(idx) ? prevState.open.filter(x => x !== idx) : [...prevState.open, idx]})
  )}
  render() {
  const { open } = this.state;
    return <div> 
      {
        data.map((levelOneItem, i) => {
          return(
          <div>
          <div> Order Id:  {levelOneItem.orderId} </div>
          {
            levelOneItem.orderParts.map((levelTwoItem, j) => {
               return(
                  <div>
                  <div> Order Part Id: {levelTwoItem.orderPartsId} </div>
                  <Button onClick={this.toggle(i)}>Display Token</Button>
                  <Collapse isOpen={open.includes(i)}>
                    {
                       <div>
                        {levelTwoItem.regTokens.map((levelThreeItem, k) => {
                          return(<span> {levelThreeItem} </span>)
                        })
                     }
                       </div>
                    }
                  </Collapse>
                  </div>
               )
            })
          }
          </div>
          )
        })
      }
    </div>;
  }

}


ReactDOM.render(<Menu />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>

如果您希望在初始化时将它们全部打开。

表示所有项目的索引列表

您可以生成一个列表，例如[0, 1, 2...]基于数据的长度

this.state = {
  open: [...Array(data.length).keys()]
}

const data = [{"orderId":1,"orderNo":"123", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3"]}] },
{"orderId":2,"orderNo":"456", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1","Token3"]}] },
{"orderId":3,"orderNo":"789", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3", "Token4"]}] }
]

const {Component, Fragment} = React;
const {Button, Collapse} = Reactstrap;

class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: [...Array(data.length).keys()]
    };
  }
  
  toggle = idx => () => {
    this.setState(prevState => ({open: this.state.open.includes(idx) ? prevState.open.filter(x => x !== idx) : [...prevState.open, idx]})
  )}
  render() {
  const { open } = this.state;
    return <div> 
      {
        data.map((levelOneItem, i) => {
          return(
          <div>
          <div> Order Id:  {levelOneItem.orderId} </div>
          {
            levelOneItem.orderParts.map((levelTwoItem, j) => {
               return(
                  <div>
                  <div> Order Part Id: {levelTwoItem.orderPartsId} </div>
                  <Button onClick={this.toggle(i)}>Display Token</Button>
                  <Collapse isOpen={open.includes(i)}>
                    {
                       <div>
                        {levelTwoItem.regTokens.map((levelThreeItem, k) => {
                          return(<span> {levelThreeItem} </span>)
                        })
                     }
                       </div>
                    }
                  </Collapse>
                  </div>
               )
            })
          }
          </div>
          )
        })
      }
    </div>;
  }

}


ReactDOM.render(<Menu />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

accordion

reactstrap

如何让react中所有可折叠项默认打开？ 的相关文章

  • 从 JavaScript 中 Firebase 数据库的查询结果中获取特定子项的值

    我在 Firebase 上有这个示例数据库 样本数据库 我有一个index html 其中有这两个输入文本 div class login form h2 Login Form h2 div

  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr

  • 在 HTML SELECT 标记中禁用键盘

    我想禁用 HTML SELECT 标记的键盘 以便用户只能使用鼠标来选择选项 我试过了event cancelBubble true on the onkeydown onkeyup and onkeypress没有运气的事件 有任何想法吗

  • 了解执行模型和事件循环

    我读过很多关于JavaScript单线程执行模型 事件循环和事件队列的文章 但有一件事尚不清楚 我创建了一个小提琴来说明我的问题 http jsfiddle net yzpmf67f http jsfiddle net yzpmf67f

  • Atom“自动完成”不起作用

    因此 当您安装 Atom 时 autocomplete 会随其一起提供 并且默认情况下处于启用状态 当我编写代码时 什么也没有显示 为什么 是否需要配置任何文件才能正常工作 In autocomplete plus settings pag

  • JavaScript 中的 Promise.all：如何获取所有 Promise 的解析值？

    我编写了以下node js文件 var csv require csv parser var fs require fs var Promise require bluebird var filename devices csv var d

  • 如何使用 jquery 从 iframe 内部滚动？

    我正在使用一个 Shadowbox 它生成一个 iframe 以在页面上显示产品详细信息 由于详细信息页面可能相当长 因此客户端需要一个 更多 按钮来向下滚动页面 显然 iframe 右侧的滚动条还不够 这是我为了让 iframe 滚动而尝

  • Angular 2 最终版本路由器单元测试

    如何使用 karma 和 jasmine 对 Angular 2 0 0 版中的路由器进行单元测试 这是我的旧单元测试在版本 2 0 0 beta 14 中的样子 import it inject injectAsync beforeEac

  • 如何滚动到 jQuery Mobile 中的页面元素？

    我有一个很长的 jQuery 移动页面 并且想在页面加载后滚动到该页面中间的元素 到目前为止 我已经尝试了一些事情 最成功的是 jQuery document bind mobileinit function var target if t

  • 向 FTP 服务器执行跨域 XMLHTTPREQUEST 的语法是什么？

    我有一个 webDav CORS 插件 可以使用它在 webDav 服务器上 POST PUT GET REMOVE ALLDOCS 文件 我现在想对 FTP 做同样的事情 但我正在努力获取xmlhttprequest 工作语法 我只是收到

  • HTML5 拖放 - 没有透明度？

    当我将一个元素拖放到页面上时 该元素会变成 幻影 基本上它获得了一些透明度值 有什么办法可以做到吗opacity 1 看来是做不到了 拖动的元素被放入具有自己的不透明度 低于 1 的容器中 这意味着虽然您可以降低拖动元素的不透明度 但您无法

  • 在 NPM 上捆绑并发布客户端 Web 代码

    我制作了一个 JavaScript 文件 假设它的内容是这样的 let myCoolAlert str gt alert str in a different js file SO doesn t allow you to cross fi

  • 将服务连接到现有的流星帐户

    我正在设置一个流星应用程序 其中涉及使用用户名和密码进行注册 然后希望将该帐户与 Facebook 和 Twitter 连接起来 我只需使用帐户包即可轻松启动并运行第一部分 但是当我有一个登录用户调用 Meteor loginWithFac

  • Phonegap 图像未显示

    我无法让图像在我的phonegap 版本中正常工作 我读过绝对路径可能不起作用 所以我尝试了绝对路径和相对路径 但仍然没有运气 我包括这样的图像

  • ERR_IMPORT_ASSERTION_TYPE_MISSING 用于导入 json 文件

    这段代码运行良好 我不知道是因为我升级到 Node 17 还是什么原因 但现在我明白了 TypeError ERR IMPORT ASSERTION TYPE MISSING Module file Users xxxxx code pro

  • 将 javascript 变量发送到服务器端 ASP .NET

    我需要在回发时将 JavaScript 数据传递到服务器端 Exvar jsVariableToPass new Object jsVariableToPass key1 value1 jsVariableToPass key2 value

  • 可选链接在 create-react-app 中不起作用

    In a create react app项目 我正在使用 babel plugin proposal optional chaining在我的 babelrc中 但是 我有这个错误 Module parse failed Unexpect

  • 如何在 Javascript 中将字符串数组转换为特定的树结构

    我从后端获取文件路径列表 它代表文件夹结构 如下所示 paths path to file1 doc path to file2 doc foo bar doc 路径的长度是任意的 为了使用文件树组件 角度2树组件 https github

  • React + 路由器 + Google 标签管理器

    我花了一些时间在 Quickcypher com 上开发 MVP 我想开始进行一些分析 它对于跟踪总访问量非常有用 但是当我尝试跟踪使用 React Router 的网站上的不同 URL 时 情况却出问题了 我的方法是这样的 设置一个在某些

  • 使用 Promise 语法编写同步代码有什么好处吗？

    有同步承诺这样的概念吗 使用 Promise 语法编写同步代码有什么好处吗 try foo bar a b bam catch e handleError e 可以写成类似的东西 但使用同步版本then foo then bar bind

随机推荐

热门标签