javascript - 如何创建一个动态列表，其中的元素描述仅在单击元素时显示？

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

问题似乎是当您单击一个列时，您将单击事件监听器分配给所有列，要解决此问题，您可以将列的索引作为 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;
    }
 }