react写单选按钮或table标签

首先，原理是一样的：

 

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;

http://www.cnblogs.com/xianyulaodi/p/5634843.html