Question

React-通过点击事件在地图功能内渲染项目

2017-08-20

14410

reactjs

假设我有一个包含两个项目的数组我想创建一个点击事件，该事件将显示我单击的特定索引的一些内容

例如：

let array = [
  {name:test},
  {name:test2}
]

this.array.map((item,index)=>{

   return(

      <div>
        {item.name}
         <button onClick={()=>this.showContentFunction()} >show content</button>
         {this.renderContent()}
      </div>

   )

})

现在它将显示两个项目，我想单击第一个项目按钮并仅显示同一项目索引下的隐藏内容而不是所有项目

我该怎么做

非常感谢！

Answer 1

<button onClick={() => this.showContent(index)}>Show Content</button>

这是一般思路。您需要将项目的索引传递给您的点击处理程序。在您的点击处理程序中，您可以执行一些操作来编辑数组中的项目本身，将 showContent 布尔值设置为其属性之一，然后像这样使用它...

this.array.map((item, index) => {
   return (
      <div>
         {item.name}
         <button onClick={() => this.showContent(index)}>Show Content</button>
         {item.showContent &&
            this.renderContent()
         }
      </div>
   );
})

...或者您可以维护从项目 ID 到内容可见性的映射，并在渲染时引用它：

constructor(props) {
  super(props);

  this.state = {
    isItemContentVisible: {}
  };
}

showContent(id) {
  // merge new value with existing visibility status into new object
  this.setState({
    isItemContentVisible: {     
      ...this.state.isItemContentVisible,
      [id]: true
    }
  });
}

// ...and when you're rendering the list...
this.array.map((item, index) => {
   return (
      <div>
         {item.name}
         <button onClick={() => this.showContent(item.id)}>Show Content</button>
         {this.state.isItemContentVisible[item.id] &&
            this.renderContent()
         }
      </div>
   );
})