popbean-react/src/bs3/dynamic-form.jsx

let me think about something,comming soon...

var React = require('react/addons');
var LensedStateMixin = require('react-lensed-state');
var ReactTools = require('react-tools');
var DatePicker = require('react-datepicker');
var FormBuilder = require('./form-builder');
var moment = require('moment');
//var LensedStateMixin = require('react-lensed-state');
var LensedStateMixin = require('./linked-state');
//
var ReactSelect = require('react-select');
var select_css = require('../../node_modules/react-select/dist/default.css');
//
var DynamicForm = React.createClass({
	mixins: [LensedStateMixin],
	getDefaultProps:function(){
		return {
			colcount:2,
			model:{
				fields:[]
			}
		};
	},
	getInitialState:function(){
		return {
			data:{}
		};
	},
	render:function(){
		var full_row_style = {
			width:"90%"
		};
		//console.log('original:',this.props.model.fields);
		var fields = this.props.model.fields || [];
		//
		var datechange_bus = {};
		var refchange_bus  = {};
		var reffetch_bus = {};//异步取数
		var ref_range = {};
		var self = this;
		fields.map(function(item){//定义用于date类型绑定的函数，好悲剧啊
			if(item.type == 'date'){
				datechange_bus[item.code] = function(date){
					var update = {};
					update[item.code] = date;
					var newData = React.addons.update(self.state,{data:{$merge:update}});//有深度的state将不会被复制，必须要用这种方式来进行处理
					self.setState( newData );
				};
			}else if(item.type == 'ref'){//为了绑定ref的数据
				if((typeof item.range) == 'string'){//如果用这个，就是异步模式
					reffetch_bus[item.code] = function(input,callback){
						fetch(item.range).then(function(response){
							return response.json();
						}).then(function(json){
							var tmp = json['data'];
							callback(null,{
								options:tmp,
								complete:true
							});
						}).catch(function(ex){
							console.log(ex);
						});
					}
				}else{
					ref_range[item.code] = item.range;
				}
				refchange_bus[item.code] = function(ids){
					var update = {};
					update[item.code] = ids;
					var newData = React.addons.update(self.state,{data:{$merge:update}});//有深度的state将不会被复制，必须要用这种方式来进行处理
					self.setState( newData );
				};
			}
		});
		//
		var result = FormBuilder.build(this.props.colcount,fields);//FIXME 谨慎怀疑state变化能带来界面的更新
		//console.log('result:-->',result,'<--','this.state:',this.state);
	    var ele = ReactTools.transform(result);
    	var ret = eval(ele);//FIXME 需要try-catch
    	return ret;
	} 
});
module.exports = DynamicForm;