react 点击列表某一项，当前项 active ，其他项恢复默认； 单选效果，多选效果

开发中经常会遇到这样得场景

• 点击列表中得某一项，当前项激活，其他项恢复默认 ( 单选样式 )
• 点击列表中得某一项，当前项激活，再次点击，当前项目恢复默认，不影响其他项 ( 多选样式 )

上代码

test.js

import React from 'react'

import './test.scss'

class Test extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            dataList: [
                { name: '这是1111', checked: false, },
                { name: '这是2222', checked: false, },
                { name: '这是3333', checked: false, },
                { name: '这是4444', checked: false, }
            ]
        }
    }
    itemClick(item,index){
        let list = this.state.dataList;
        list.forEach(item=>{
            item.checked = false;
        })
        list[index].checked = true;
        this.setState({
            dataList:list
        })
    }
    render() {
        return (
            <div className="Test">
                {
                    this.state.dataList.map((item, index) => {
                        return (
                            <div className={item.checked ? 'item item-active' : 'item'} key={index} onClick={this.itemClick.bind(this,item,index)}>
                                {item.name}
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
export default Test

test.scss

.Test {

    .item {
        line-height: 30px;
    }

    .item-active {
        color: red
    }
}

完成单选效果，主要靠得就是 itemClick 函数

如果需要得是多选效果，将 itemClick 函数 修改为如下即可

 itemClick(item,index){
        let list = this.state.dataList;
        list[index].checked = !list[index].checked;
        this.setState({
            dataList:list
        })
    }