react实现标签切换，点击标签时候无效，错误如图所示

Question

import React from 'react';
import './styles/index.less'

class Tab extends React.Component {
    constructor(){
        super()
        this.state = {
            list:['色情','暴力','政治','文化'],
            content:[
                {item:'http://192.168.1.247/data/chenjianyi/kuaishou300k/kuaishou_images/6307318905_0.jpg'},
                {item:'内容二'},
                {item:'内容三'},
                {item:'内容四'}
            ],
            current:0
        }
    }

    handleClick(index){
        this.setState({ current:index });
    }

    currentClass(index){
        return this.state.current === index ? 'current' : '';
    }

    contentClass(index){
        return this.state.current === index ? 'active' : '';
    }

    render(){
        return(
            <div className={"result_tab"}>
                <ul id="tab" >
                    //通过props的形式传递数据和方法给子组件
                    //::this es7的语法详见https://github.com/tc39/proposal-bind-operator
                    { this.state.list.map( (val,index ) => {
                        console.log(val," ==", index);
                        return ( <List currentClass={::this.currentClass} handleClick={::this.handleClick} val={val} key={index} index={index} /> )
                    }) }


                </ul>
                <div id="content" >
                    { this.state.content.map( ( val,index ) => {
                        return ( <Content key={index} val={val.item} index={index}  contentClass={::this.contentClass } /> )
                    })}
                </div>
            </div>
        )
    }
}


class List extends React.Component {

    handleClick(){
        //调用父组件的方法 将逻辑处理交给父组件
        this.props.handleClick(this.props.index);
    }
    render(){
        return(
            <li className={this.props.currentClass(this.props.index)} onClick={this.handleClick} >{this.props.val}</li>
        )
    }
}

class Content extends React.Component {

    render(){
        return(
            <div className={this.props.contentClass(this.props.index)} >{ this.props.val  }</div>
        )
    }
}

export default Tab;

Answer 1

onClick的this指向不对