Question

我有一个用react生成的项目列表。当我单击这些项目时，每个项目都必须在其下方显示一个带有选项的栏。当前代码的问题是，我必须双击以显示栏，并且还必须双击以隐藏其他代码。我只需要单击一下。请记住，该列表是动态的。对于静态列表，这很容易做到。

我试图更改代码，但最接近的方法是一次单击即可显示所有项目的所有条形图。

_list() {
    return (
        <>
            <div>
                {
                    this.state.places
                        .map(place =>
                            (
                                <div key={place.id} className="listItem">
                                    <div className="place" onClick={this.toggleListItem}>
                                        <div className="placeTitle">{place.name}</div>
                                        <div className="placeAddress">{place.address}</div>
                                    </div>
                                    <div className="content">
                                        <div>
                                            <i className="fas fa-edit fa-2x" onClick={this.handleClick('edit', place)}></i>
                                            <i className="far fa-trash-alt fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            )
                        )
                }
            </div>
            <div className="addPlaceButton" onClick={this.handleClick('edit')}>
                <span className="addPlace">ADD A NEW PLACE</span>
            </div>
        </>
    );
}



toggleListItem() {
    var coll = document.getElementsByClassName("place");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            this.classList.toggle("active");



            let siblingContent = this.nextElementSibling;

            if (siblingContent.style.maxHeight) {
                siblingContent.style.maxHeight = null;
                this.style.webkitBorderBottomLeftRadius = 8;
                this.style.webkitBorderBottomRightRadius = 8;

            } else {
                siblingContent.style.maxHeight = siblingContent.scrollHeight + "px";
                this.style.webkitBorderBottomLeftRadius = 0;
                this.style.webkitBorderBottomRightRadius = 0;
            }
        });
    }
}

Answer 1

问题似乎是，当您单击列时，将click事件侦听器分配给所有列，要解决此问题，您可以将该列的索引作为 toggleListItem（index）传递给您的toggleListItem函数。并相应地分配eventListener函数。

this.state.places.map((place, index) =>(
         <div key={place.id} className="listItem">
             <div className="place" onClick={this.toggleListItem(index)}>
...

toggleListItem(index){
  var coll = document.getElementsByClassName("place");
  coll[index].addEventListener("click", function () {
  this.classList.toggle("active");

  let siblingContent = this.nextElementSibling;

  if (siblingContent.style.maxHeight) {
    siblingContent.style.maxHeight = null;
    this.style.webkitBorderBottomLeftRadius = 8;
    this.style.webkitBorderBottomRightRadius = 8;

  } else {
       siblingContent.style.maxHeight = siblingContent.scrollHeight + "px";
       this.style.webkitBorderBottomLeftRadius = 0;
       this.style.webkitBorderBottomRightRadius = 0;
    }
 }

如何创建一个具有仅在单击项目时显示项目说明的动态列表？

1 个答案: