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