react 实现列表折叠效果

不断的蜕变只为遇见更好的自己，共勉。

updow.png

import React,{Component} from 'react'
import '../../css/updown.css'
import Header from '../../compent/header'

export default class upDown extends Component {
  constructor(props){
    super(props);
    const list=[
      {name:'小王',sex:'女',age:'18',adress:'王家坝三村二组6-5',disable:false},
      {name:'小明',sex:'男',age:'18',adress:'王家坝三村二组6-4',disable:false},
      {name:'小二',sex:'男',age:'18',adress:'王家坝三村二组6-5',disable:false},
    ]
    this.state={
      list
    }
  }

  //给数组添加 标识  实际项目中会用到，本demo 直接在数据中添加了标识
  // addDisable(){
  //   for (let i = 0; i < res.list.length; i += 1) {
  //     list[i].disable = false;
  //   }
  // }

    changeUp = (index) =>{
      const list=this.state.list;
      list[index].disable = !list[index].disable
      this.setState({
        list
      });
    }

  render(){
    const {list} =this.state;
    return(
      <div>
        <Header title={'集合渲染伸缩隐藏'}/>
          <ul>
            {list.map((item,index)=>(
              <li key={index}>
                <div className="topbox" onClick={()=>this.changeUp(index)}>
                  <div>{item.name}</div>
                  <div>{item.sex}</div>
                  <div>{item.age}</div>
                </div>
                  <div className={item.disable ? 'show':'hide'}>
                        {item.adress}
                   </div>
               </li>
            ))}
          </ul>
      </div>
    )
  }
}

//css
.hide{display: none;}
.show{display: block;text-align: center;color: #fff;
background: chocolate;height: 30px;line-height: 30px;}
ul{margin: 0;padding: 0}
ul li{background: olivedrab;list-style: none;margin-top:10px; }
.topbox{display: flex;flex-direction: row}
.topbox div{margin-left: 30px;height: 30px;line-height: 30px;}