Question

state = {
   collapse:false
}
toggle = () => {
  this.setState({
       collapse: !this.state.collapse
  })
}

在我的渲染中我有多个li（动态li）

<ul>
    <li>
    <span onClick={this.toggle} >Show content</span> 
    {this.state.collapse && <div>display some Content</div>}
   </li>
</ul>

但是当我点击显示内容时，所有li内容都显示如何控制，请给出解决方案。

预期产出：它应该只显示一个div属于被点击的元素

Answer 1

您需要为每个列表项存储切换状态。最简单的方法是使用items索引来存储布尔天气，否则内容应该是可见的。所以拿你最初的例子看起来像这样：

state = {
  collapse: {}
}

toggle = (index) => {
  this.setState({
    collapse[index]: !this.state.collapse[index]
  })
}

render () {
  return (
    <ul>
      {someArray.map((index, string) =>
        <li key={i}>
          <button onClick={() => this.toggle(index)}>Show Content</button>
          {this.state.collapse[index] && <div>{string}</div>
        </li>}
    </ul>
  )
}

在为动态内容切换div时，所有div都使用React js显示而不是一个div

1 个答案: