gistfile1.js

var WHForm = React.createClass({
    handleBlur: function() {
      this.props.commitChanges(this.state);
    },
    handleChange: function(ev) {

        var state = this.state;

        this.state[ev.target.name] = ev.target.value;
        this.setState(state);
    },
    handleChangeLast: function(ev){
        this.handleChange(ev);
        console.log('save the item?');
    },
    componentWillReceiveProps: function(nextProps) {
        var attr,
            state = this.state,
            updated = false;

        for(attr in nextProps) {
            if(nextProps[attr] !== state[attr]) {
                updated = true;
                state[attr] = nextProps[attr];
            }
        }

        // This will hardly ever be true.
        // It is more of a safety catch if the parent updates something.
        if(updated) this.setState(state);
    },

    getInitialState: function() {
        // We definitely only have 4 pieces of information required here, nothing more.
        return {
            duration: this.props.duration,
            employer: this.props.employer,
            period: this.props.period,
            role: this.props.role
        }
    },

    render: function() {
        return (
            <form method="post" action="">
                <label htmlFor="WHItem-employer">Employer</label>
                <input onBlur={this.handleBlur}
                       onChange={this.handleChange}
                       type="text" id="WHItem-employer" name="employer" placeholder="e.g. Company name" value={this.state.employer} />
                       
                <label htmlFor="WHItem-role">Role</label>
                <input onBlur={this.handleBlur}
                       onChange={this.handleChange}
                       type="text" id="WHItem-role" name="role" placeholder="e.g. Role title" value={this.state.role} />
                       
                <label htmlFor="WHItem-date">Date</label>
                <input onBlur={this.handleBlur}
                       onChange={this.handleChange}
                       type="text" id="WHItem-date" name="period" placeholder="e.g. June 2015" value={this.state.period} />
                       
                <label htmlFor="WHItem-duration">Duration</label>
                <input onBlur={this.handleBlur}
                       onChange={this.handleChangeLast}
                       type="text" id="WHItem-duration" name="duration" placeholder="e.g. 2 weeks" value={this.state.duration} />
                       
                <div>
                    <a onClick={this.props.removeEntry}>Remove</a> | <a onClick={this.props.saveEntry}>Save</a>
                </div>
            </form>
        )
    }
});