关注已关注

关注已关注功能的实现 1.首先设置一个开关，点击的时候打开开关，再点一下关闭开关（state对象，不能是数组）

1.设置开关isFollow
info: [
            {
                name: '我爱学习',
                des: '我爱学习',
                isFollow: false,
            },
            {
                name: '我爱代码',
                des: '我爱代码',
                isFollow: false,
            },
            {
                name: '我爱前端',
                des: '我爱前端',
                isFollow: false,
            },
           
        ],
        
        handleFollow = (e) => {
        // 只把选中的开关打开
        let info = JSON.parse(JSON.stringify(this.state.info))
        for (let item of info) {
            if (item.name === e.target.parentNode.childNodes[0].childNodes[1].innerHTML) {
                item.isFollow = !item.isFollow
            }
        }
        //更新开关
        this.setState({
            info
          }, () => { console.log(info) })
        
        console.log(e.target.parentNode.childNodes[0].childNodes[1].innerHTML)\
    }

2.如果开关打开，变成已关注，样式变成红色；如果在开关关闭，变成关注，样式变成蓝色。

//因为是要每一个开关会不影响，所以map应写在最外边，生成三个互不影响的盒子，盒子里面装着关注按钮。
                    <div>
                        {info.map((item) => {
                            return (
                                <div>
                                            <div className='author'>
                                                <div>{item.name}</div>
                                            </div>
                                            <div onClick={this.handleFollow.bind(this)} className={item.isFollow === true ? 'follow' : 'champion_p'}>{item.isFollow === true ? '已关注' : '+关注'}</div>      
                                </div>
                            )
                        })}

                    </div>