ap - call onChange when bound form data changes

src/components/BoundForm.js

@@ -8,12 +8,14 @@ class BoundForm extends React.Component {
     children: React.PropTypes.node,
     errors: React.PropTypes.object,
     object: React.PropTypes.object.isRequired,
-    onSubmit: React.PropTypes.func
+    onSubmit: React.PropTypes.func,
+    onChange: React.PropTypes.func
   };
 
   static defaultProps = {
     errors: {},
-    onSubmit: noop
+    onSubmit: noop,
+    onChange: noop
   };
 
   constructor(props) {
@@ -32,6 +34,7 @@ class BoundForm extends React.Component {
   handleChange = name => data => {
     const value = data.target instanceof Element ? data.target.value : data;
     this.setState({ formData: set(this.state.formData, name, value) });
+    this.props.onChange(this.state.formData);
   }
 
   render() {

test/components/BoundForm.spec.js

@@ -24,6 +24,7 @@ describe('<BoundForm />', () => {
   }
 
   const submitFunc = sinon.stub();
+  const changeFunc = sinon.stub();
 
   const Composite = props => (
     <div>
@@ -33,7 +34,7 @@ describe('<BoundForm />', () => {
   );
 
   const component = shallow(
-    <BoundForm object={data} errors={errors} onSubmit={submitFunc}>
+    <BoundForm object={data} errors={errors} onSubmit={submitFunc} onChange={changeFunc}>
       <FormRow label="First Name" name="firstName" />
       <FormRow label="Last Name" name="lastName" />
       <FormRow type="checkbox" label="Foobar" name="checkboxes">
@@ -61,6 +62,12 @@ describe('<BoundForm />', () => {
     assert.equal(component.state('formData').firstName, 'Desmond');
   });
 
+  it('should emit onChange when changed', () => {
+    const row = component.find('[name="firstName"]');
+    row.simulate('change', 'Desmond');
+    assert(changeFunc.calledWith(Object.assign({}, data, { firstName: 'Desmond' })));
+  });
+
   it('should support nested data', () => {
     const row = component.find('[name="address"]');
     assert.equal(row.prop('value'), component.state('formData').address);