react动态渲染li点击添加样式--单选与多选

react动态渲染li点击添加样式—单选与多选

一、li 单项选择

效果描述：li 是根据请求接口数据动态渲染生成，点击 li 时给当前 li 添加相应的样式，效果图如下：

实现方式：

1. 先是动态渲染出li，给li 增加样式className和onClick点击事件

（此部分写在render中）

 var _self = this;  //更改this指向
 <ul>
          {this.state.cityList.map(function(item,index){
            return(
                  <li key={index} data-cityid={item.id} 
                      className={_self.state.choooseStyle === index?"choooseStyle":''}
                      onClick={_self.chooseCity.bind(this,index)}>{item.name}
                  </li>
            )
          })}
</ul>

2. 样式设定初始默认值，可为“ ”

constructor(props){