[原创] react初探

react

2015-07-23 1605

最近react很火,自己也尝试一下,最常用的一个例子,react实现地址数据联动


---------对现有方法进行扩展,实现默认选中指定的城市数据,主要代码红色标记。使用到underscore.js这个类库,真心好用


var _base_api_url = "http://www.lixuanqi.com";

var _p_id=3;    //////默认选中的省
var _c_id=7;    //////默认选中的市
var _a_id=153;  //////默认选中的县

var SelArea = React.createClass({
    getInitialState: function () {
        return {pro_item: [], city_item: [], area_item: [],email_val:""};

    },
    componentDidMount: function () {
        var str_init_data_url = _base_api_url+"/api/v1/address/get_data.json";
        this.get_init_area_data(str_init_data_url, "pro");   ///////初始化省份数据
    },
    handleInputChange:function(e){
        this.setState({email_val:e.target.value});
    },

    handleDalSelectedData:function(data,id,type){
        var item_find = _.find(data,function(item){
            return item.id == id;
        });
        data[_.indexOf(data,item_find)].select = true;
        var tem_p_data = data;
        this.setState({type: tem_p_data});        
        var tem_obj = new Object();
        tem_obj.target = {};
        tem_obj.target.value = {};
        tem_obj.target.value = id;
        return tem_obj;
    },
    get_init_area_data: function (url, tag) {
        var that = this;
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json'
        })
            .done(function (msg) {
                if (that.isMounted()) {
                    if (tag == "pro") {
                        that.setState({pro_item: msg.data});

                        if(_p_id)
                        {                           
                            var tem_obj = that.handleDalSelectedData(msg.data,_p_id,"pro_item");
                            that.handleProChange(tem_obj);
                            _p_id = "";
                        }

                    }
                    if (tag == "city") {
                        that.setState({city_item: msg.data});

                        if(_c_id)
                        {
                            var tem_obj = that.handleDalSelectedData(msg.data,_c_id,"city_item");
                            that.handleCityChange(tem_obj);  ////////暂时没有找到如何触发html元素的事件,想到这种曲线救国的方法;拼接一个参数直接调用事件handle函数
                            _c_id = "";
                        }

                    }
                    if (tag == "area") {
                        that.setState({area_item: msg.data});

                        if(_a_id)
                        {
                             that.handleDalSelectedData(msg.data,_a_id,"area_item");
                            _a_id = "";
                        }
                    }
                }
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    },
    handleProChange: function (e) {
        console.log("sel_pro_change");
        var sel_val = e.target.value;
        console.log(sel_val);
        this.get_init_area_data(_base_api_url+"/api/v1/address/get_data.json?tag=city&fid=" + sel_val, "city");
        // var tem_city_arr = new Array();
        // for (var i = 0; i < data_city.length; i++) {
        //     var tem_obj = data_city[i];
        //     if (tem_obj.fid == sel_val) {
        //         tem_city_arr.push(tem_obj);
        //     }
        //     this.setState({
        //         city_item: tem_city_arr
        //     });
        // }
    },
    handleCityChange: function (e) {
        console.log("sel_city_change");
        var sel_val = e.target.value;
        console.log(sel_val);
        //var tem_area_arr = new Array();
        this.get_init_area_data(_base_api_url+"/api/v1/address/get_data.json?tag=area&fid=" + sel_val, "area");
        //for(var i=0;i<data)
    },
    render: function () {
        return (
            <div className="div-area">
                <button className="btn btn-primary">按钮</button>
                <label>省</label>
                <select onChange={this.handleProChange}>
                    <option value="0">请选择</option>
                    {this.state.pro_item.map(function (item) {
                        return (
                            <option value={item.id} selected={item.select}>{item.name}</option>
                        );
                    })}
                </select>
                <label>市</label>
                <select onChange={this.handleCityChange}>
                    <option value="0">请选择</option>
                    {this.state.city_item.map(function (item) {
                        return (
                            <option value={item.id} selected={item.select}>{item.name}</option>
                        );
                    })}
                </select>
                <label>区</label>
                <select>
                    <option value="0">请选择</option>
                    {this.state.area_item.map(function (item) {
                        return (
                            <option selected={item.select}>{item.name}</option>
                        );
                    })}
                </select>
                <br/>
                <div className="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" className="form-control" id="exampleInputEmail1" onChange={this.handleInputChange} placeholder="Email" />
                    </div>
                <div>
                    <p className="bg-success">{this.state.email_val}</p>
                </div>
            </div>
        );
    }
});


React.render(<SelArea/>, document.body);