class Loca_choose_wrap extends Component{

    constructor(){

        super();

        this.state={

            port_name:[{name:"深圳蛇口",id:0},{name:"澳门外港",id:1},{name:"澳门氹仔",id:2},{name:"香港机场",id:3},{name:"香港港澳",id:4},{name:"深圳机场",id:5},{name:"珠海九州",id:6}],

            currentindex:-1

        }

    }

    handlelistclick(id){

        console.log(id)

        this.setState({

            currentindex:id

        })

    }

    render(){

        var _this=this;

        var map_fun=this.state.port_name.map(function(port_name1,index){

                    var tabStyle=port_name1.id==this.state.currentindex;

                    console.log(port_name1.id)

                    return <Loca_choose port_name={port_name1.name} key={index} dindex={index}

                            handlelistclick={this.handlelistclick.bind(this, port_name1.id)}

                            choose_circle_state={tabStyle}/>

                }.bind(this)

                );

        return(

            <div className="loca_choose_box">

                {map_fun}

            </div>

            )

    }

}

export default Loca_choose_wrap;