React map列表点击切换 classname（state）

1.首先需要map一个ul列表

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May','Jun','Jul','Ang','Sep','Oct','Nov','Dec'];
const monItems = months.map((item,index) =>
    <div className={index===this.state.isclick?'monthClick month':'month'} key={index} 
    onClick={this.handleSiblingsClick.bind(this,index)} >{item+index}</div>
);
return <ul className='monList'>{monItems}</ul>;

点击改变样式的核心代码是：

className={index===this.state.isclick?'monthClick month':'month'}

注意这里的function要用bind进行绑定。

2.点击时进行赋值并回调

 handleSiblingsClick = (index) => {
     this.setState({
         isclick: index
     })
 }

这种方法亲测有效，其中最重要的部分就是点击后的这个函数必须应该是回调函数，如果不是的话，页面是无法调用render进行重新渲染的。

另外还有一种办法，是自定义一个data-index属性进行暂存，然后在function 中使用 e.target.parentNode.parentNode.getAttribute(‘data-index’)获取index