reactjs - 下拉菜单不能循环工作，但正常

问题描述

我正在制作一个下拉手风琴。在将我的代码调整为下面的示例后，一切正常：

示例：https ://codepen.io/CreativeBulma/pen/YbQqoQ

训练数据

[{
    "von": "17:00",
    "bis": "18:00",
    "tag": "Mittwoch",
    "trainingsid": 46
},
{
    "von": "19:00",
    "bis": "21:00",
    "tag": "Donnerstag",
    "trainingsid": 51
}]

这就是它的工作原理：

 <div ref={collapsiblesRef} id={`accordion_first2`}>
                        
                            <div className="card">
                                <header className="card-header">
                                    <p className="card-header-title">
                                        montaj
                                    </p>
                                    <a href={`#collapsible-card-0`} data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
                                        <span className="icon">
                                            <i className="fas fa-angle-down" aria-hidden="true"></i>
                                        </span>
                                    </a>
                                </header>
                                <div id={`collapsible-card-0`} className="is-collapsible" data-parent={`accordion_first2`}>
                                    <div className="card-content">
                                        <p className="is-small has-text-primary has-text-weight-semibold">Tag</p>

                                        <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Wochentag" />
                                        <p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit von</p>
                                        <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit von" />

                                        <p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit bis</p>
                                        <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit bis" />

                                        <article className="message mt-3">
                                            <div className="message-body">
                                                Uhrzeit von ist die Startzeit und Uhrzeit bis ist die Endzeit des Trainings. Gültiges Format hh:mm, z.B. 17:45.
                                            </div>
                                        </article>


                                    </div>
                                </div>
                            </div>

                            <div className="card">
                                <header className="card-header">
                                    <p className="card-header-title">
                                        dasdasd
                                    </p>
                                    <a href={`#collapsible-card-1`} data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
                                        <span className="icon">
                                            <i className="fas fa-angle-down" aria-hidden="true"></i>
                                        </span>
                                    </a>
                                </header>
                                <div id={`collapsible-card-1`} className="is-collapsible" data-parent={`accordion_first2`}>
                                    <div className="card-content">
                                        <p className="is-small has-text-primary has-text-weight-semibold">Tag</p>

                                        <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Wochentag" />
                                        <p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit von</p>
                                        <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit von" />

                                        <p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit bis</p>
                                        <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit bis" />

                                        <article className="message mt-3">
                                            <div className="message-body">
                                                Uhrzeit von ist die Startzeit und Uhrzeit bis ist die Endzeit des Trainings. Gültiges Format hh:mm, z.B. 17:45.
                                            </div>
                                        </article>


                                    </div>
                                </div>
                            </div>

                    </div>

由于我有几个要添加到下拉列表中的元素，因此我正在使用循环。但不幸的是，在添加循环后，可折叠设备无法正常工作 - 它们保持打开状态，我无法关闭它们或与它们交互。

所以这实际上是我想要的：

                <div ref={collapsiblesRef} id={`accordion_first`}>
                    {trainingData.map((d, i) => (
                        <div className="card" key={i}>
                            <header className="card-header">
                                <p className="card-header-title">
                                    {d.tag}
                                </p>
                                <a href={`#collapsible-card-${i}`} data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
                                    <span className="icon">
                                        <i className="fas fa-angle-down" aria-hidden="true"></i>
                                    </span>
                                </a>
                            </header>
                            <div id={`collapsible-card-${i}`} className="is-collapsible" data-parent={`accordion_first`}>
                                <div className="card-content">
                                    <p className="is-small has-text-primary has-text-weight-semibold">Tag</p>

                                        </div>*/}
                                    <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Wochentag" />
                                    <p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit von</p>
                                    <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit von" />

                                    <p className="is-small has-text-primary has-text-weight-semibold">Uhrzeit bis</p>
                                    <input className="input mb-5" style={{ width: "33%" }} type="text" placeholder="Uhrzeit bis" />

                                    <article className="message mt-3">
                                        <div className="message-body">
                                            Uhrzeit von ist die Startzeit und Uhrzeit bis ist die Endzeit des Trainings. Gültiges Format hh:mm, z.B. 17:45.
                                        </div>
                                    </article>


                                </div>
                            </div>
                        </div>


                    ))}

                </div>

标签： reactjsloopsreact-hooks

解决方案

我玩了一下代码，这对我有用。

import React from "react";
import bulmaCollapsible from '@creativebulma/bulma-collapsible';
import 'bulma';
import '@creativebulma/bulma-collapsible';


///I want to generate a random number of collapsibles.
const array = [0,1,2,3,4,5,6]

class Collapsibles extends React.Component {
  componentDidMount() {
    this.collapsibles = bulmaCollapsible.attach(".is-collapsible", {
      container: this.refs.collapsibles
    });
  }

  

  render() {

    const collapsibles = array.map((c,i) => <article className="message">
    <div className="message-header">
      <p>
        Question 1{" "}
        <a href={"#collapsible-message-accordion-"+ i.toString()} data-action="collapse">
          Collapse/Expand
        </a>
      </p>
    </div>
    <div
      id={"collapsible-message-accordion-"+ i.toString()}
      className="message-body is-collapsible is-active"
      data-parent="accordion_first"
    >
      <div className="message-body-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
        <strong>Pellentesque risus mi</strong>, tempus quis placerat ut,
        porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
        Nullam gravida purus diam, et dictum
        <a>felis venenatis</a> efficitur. Aenean ac{" "}
        <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
        sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
        magna a neque. Donec dui urna, vehicula et sem eget, facilisis
        sodales sem.
      </div>
    </div>
  </article>)
    return (
      <div ref="collapsibles" id="accordion_first">
        
        {collapsibles}
      </div>
    )
  }
}

export default Collapsibles

关于代码的几点说明：

首先，我假设您知道这bulmaCollapsible是一个npm需要安装的软件包。您可以在此处找到安装说明。
我不完全了解您从哪里获得代码，我从您提供的 CodePen 中复制了我的代码。每个可折叠容器都是一个article标签。
我的代码缺少任何transition属性。所以它不会慢慢打开和关闭。你必须添加一些小的 CSS 来实现这一点。
该方法attach负责初始化任何具有 className 的元素is-collapsible。这样做是为了让您可以一次初始化多个可折叠项。
在我的代码中，我创建了一个const名为“array”的数组。然后我map像您一样使用该方法生成多个可折叠项。

以下将为您提供 1 个可折叠的：

 <article className="message">
 <div className="message-header">
   <p>
     Question 1{" "}
     <a href={"#collapsible-message-accordion-"+ i.toString()} data-action="collapse">
       Collapse/Expand
     </a>
   </p>
 </div>
 <div
   id={"collapsible-message-accordion-"+ i.toString()}
   className="message-body is-collapsible is-active"
   data-parent="accordion_first"
 >
   <div className="message-body-content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
     <strong>Pellentesque risus mi</strong>, tempus quis placerat ut,
     porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
     Nullam gravida purus diam, et dictum
     <a>felis venenatis</a> efficitur. Aenean ac{" "}
     <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
     sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
     magna a neque. Donec dui urna, vehicula et sem eget, facilisis
     sodales sem.
   </div>
 </div>

每个可折叠项都需要有一个唯一的 id。对于每个可折叠的，我们使用一个属性等于可折叠的 id的a标签。href这反映在您看到href={"#collapsible-message-accordion-"+ i.toString()}和id={"#collapsible-message-accordion-"+ i.toString()}

要了解有关此包如何工作的更多信息，请访问他们的JS API页面。

reactjs - 下拉菜单不能循环工作，但正常

问题描述

解决方案

推荐阅读