ExampleFormMixinUsage.ts

import Introspect = require('../../utils/Introspect');
var updateAttr = Introspect.updateAttr;
var addToUpdate = Introspect.addToUpdate;
var getAttr = Introspect.getAttr;

var FormStateView = React.createClass({
    mixins: [FormMixin],

    getInitialState: function() {
        return {
            loaded: false,
            cruises: [],
            formData: {}, // formState goes here
        }
    },

    postFormUpdate: function(newFormUpdate) {

        // responding to foo or bar update
        var newFoo = getAttr(newFormUpdate, 'foo.$set', null);
        var newBar = getAttr(newFormUpdate, 'bar.$set', null);

        if (newFoo) {
            newFormUpdate = addToUpdate(newFormUpdate, 'bar', newFoo + 'what the bar'); 
        } else if (newBar) {
            newFormUpdate = addToUpdate(newFormUpdate, 'foo', newBar + 'what the foo'); 
        }

        return newFormUpdate;
    },
    
    render: function() {
        return DOM.div({},
            this.renderFormField("Label Foo", "foo", "text"),
            this.renderFormField("Label Bar", "bar", "text")
        );
    },
    
    // and so on
});

FormMixin.ts

///<reference path="../../../libs/typedefs/node.d.ts"/>
///<reference path="../../../libs/typedefs/lodash.d.ts"/>
declare var React;
var _ = require('lodash');

var DOM = React.DOM;
import Introspect = require('../../utils/Introspect');
var updateAttr = Introspect.updateAttr;
var getAttr = Introspect.getAttr;


var FormMixin = {
    updateField: function(e) {
        var update = updateAttr(this.state.formData,
                                e.target.name, e.target.value);

        if (this.postFormUpdate) {
            update = this.postFormUpdate(update);
        }

        var updated = React.addons.update(this.state.formData, update);


        this.setState({formData: updated});
    },

    updateCheckbox: function(e) {
        var update = updateAttr(this.state.formData,
                                e.target.name, e.target.checked);

        if (this.postFormUpdate) {
            update = this.postFormUpdate(update);
        }

        var updated = React.addons.update(this.state.formData, update);
        this.setState({formData: updated});
    },

    renderFormError: function(field: string) {
        if (getAttr(this.state.errors, field, null)) {
            return DOM.small({className: 'error'},
                getAttr(this.state.errors, field).join(' ')
            );
        } else {
            return null;
        }
    },

    makeWidget: function(label: string, name: string, fieldType: string,
                         options?: any) {
        switch (fieldType) {
            case 'select':
                return DOM.select({
                    id: name,
                    name: name,
                    onChange: this.updateField,
                    value: getAttr(this.state.formData, name, null)
                }, options.map((opt) => DOM.option({value: opt[0]}, opt[1])));
                break;
            case 'textarea':
                return DOM.textarea({
                    id: name, name: name,
                    onChange: this.updateField,
                    value: getAttr(this.state.formData, name, null)
                })
                return;
        }

        return DOM.input({
            id: name, type: fieldType, name: name,
            onChange: this.updateField,
            value: getAttr(this.state.formData, name, null)
        })

    },

    renderFormField: function(label: string, name: string, fieldType: string,
                              options?: any) {

        return DOM.label({htmlFor: name},
            label,
            this.makeWidget(label, name, fieldType, options),
            this.renderFormError(name)
        )
    },

    renderCheckbox: function(label: string, name: string) {
        return DOM.label({for: name},
            DOM.input({
                type: 'checkbox',
                name: name,
                checked: getAttr(this.state.formData, name, false),
                onChange: this.updateCheckbox,
            }),
            label
        );
    },

    renderNakedFormField: function(name: string, fieldType: string) {
        return DOM.label({htmlFor: name},
            this.makeWidget(null, name, fieldType, null)
        )
    },

    renderTextarea: function(label: string, name: string) {
        return DOM.label({htmlFor: name},
            label,
            DOM.textarea({
                id: name, type: "text", name: name,
                onChange: this.updateField,
                value: getAttr(this.state, name)
            }),
            this.renderFormError(name)
        )
    }
};

export = FormMixin;

Instrospect.ts

///<reference path="../../libs/typedefs/lodash.d.ts"/>
///<reference path="../../libs/typedefs/node.d.ts"/>
var _ = require('lodash');

export function updateAttr(target: any, path: string, value: any) {
    var parts = path.split('.');
    var update = {$set: value};

    return parts.reduceRight((acc, part) => {
        var nextUpdate = {};
        nextUpdate[part] = acc;
        return nextUpdate
    }, update);
};

export function addToUpdate(target: any, path: string, value: any) {
    var parts = path.split('.');

    var update = parts.reduce((acc, part) => {
        if (!acc[part]) {
            acc[part] = {};
        }
        return acc[part];
    }, target);
    update['$set'] = value;

    return target;
};

export function getAttr(target: any, path: string, defaultVal?) {
    var parts = path.split('.');

    try {
        target = parts.reduce((acc, part) => acc[part], target);
    } catch (e) {
        if (!_.isUndefined(defaultVal)) return defaultVal;
        throw e;
    }
    return target;
}

export function hasAttr(target: any, path: string) {
    var parts = path.split('.');

    try {
        target = parts.reduce((acc, part) => acc[part], target);
    } catch (e) {
        return false;
    }
    return true;
}