[原创] react初探(二)

react 前端

2015-07-25 1740

参考链接:

http://spoike.github.io/refluxjs-todo/#/active

https://github.com/spoike/refluxjs

这个是html部分的截图,只是多了对reflux的引用

主要代码代码如下


//////reflux部分

/////actions
var actions = Reflux.createActions([
    "selChange"
  ]);

var _base_api_url = "http://www.lixuanqi.com";
//var area_data = [{pro_item:[]},{city_item:[]},{area_item:[]}];
//////stores
var store =  Reflux.createStore({
    listenables: actions, 
    init:function(){
    console.log('store init');   /////init store end
    },
    getInitialState: function () {
    console.log('react state init');  //////init state end
        return {pro_item: [], city_item: [], area_item: [],email_val:""};
    },   
    onSelChange:function(data,tag,state){
        console.log(data);
        var that = this;
        //var area_data = new Object();
        var url="";// = _base_api_url+"/api/v1/address/get_data.json?tag=area&fid=" + data;
        if(data)
        {
        url = _base_api_url+"/api/v1/address/get_data.json?tag="+tag+"&fid=" + data;
        }
        else
        {         
        url = _base_api_url+"/api/v1/address/get_data.json";
        }
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json'
        }).done(function (msg) {
                
                    if (tag == "pro") {
                        //that.setState({pro_item: msg.data});
                        state.area_data.pro_item = msg.data;
                        that.trigger(state.area_data);
                    }
                    if (tag == "city") {
                        //that.setState({city_item: msg.data});
                        state.area_data.city_item = msg.data;
                        that.trigger(state.area_data);
                    }
                    if (tag == "area") {
                        //that.setState({area_item: msg.data});
                        state.area_data.area_item = msg.data;
                        that.trigger(state.area_data);
                    }
                
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }
});


///////控件部分
var SelArea = React.createClass({
    mixins: [Reflux.connect(store, 'area_data')],    ///////关联store,调用getInitialState方法
    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");   ///////初始化省份数据
       	actions.selChange('','pro',this.state);
    },     
    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");
        actions.selChange(sel_val,"city",this.state);        
    },
    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)
        actions.selChange(sel_val,"area",this.state);
    },
    handleBtnClick:function(e){
    console.log(e);
    console.log(this.state);
    },
    render: function () {
        return (
            <div className="div-area">                
                <label>省</label>
                <select ref="selPro" onChange={this.handleProChange}>
                    <option value="0">请选择</option>
                    {this.state.area_data.pro_item.map(function (item) {
                        return (
                            <option value={item.id} selected={item.select}>{item.name}</option>
                        );
                    })}
                </select>
                <label>市</label>
                <select ref="sel_city" onChange={this.handleCityChange}>
                    <option value="0">请选择</option>
                    {this.state.area_data.city_item.map(function (item) {
                        return (
                            <option value={item.id} selected={item.select}>{item.name}</option>
                        );
                    })}
                </select>
                <label>区</label>
                <select ref="sel_area">
                    <option value="0">请选择</option>
                    {this.state.area_data.area_item.map(function (item) {
                        return (
                            <option selected={item.select}>{item.name}</option>
                        );
                    })}
                </select>   
                <button className="btn btn-primary" onClick={this.handleBtnClick}>按钮</button>             
            </div>
        );
    }
});


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