SO: redux-form, submit

by jonahe

HTML

<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.2.0/redux-form.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="root">
</div>

CSS

.member {
  border: 1px black solid;
  padding: 6px;
  margin-top: 6px;
}

Babel + JSX

// BEGIN SETUP
const Component = React.Component
const {reduxForm, View, Button, FormSection, FieldArray, Field, reducer: formReducer} = ReduxForm;
const {createStore, combineReducers} = Redux
const {Provider} = ReactRedux;
const { RaisedButton, MuiThemeProvider, getMuiTheme, TextField } = MaterialUI;
const reducers = {
  form: formReducer
}
const reducer = combineReducers(reducers)
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
// END SETUP
// BEGIN EXAMPLE


const MyForm = ({handleSubmit, onSubmit}) => {
	const renderCustomField = ({input, meta, ...custom}) => {
  	const reduxFormOnChange = input.onChange;
    const newOnChange = (a,b,c) => {
    	console.log(a,b,c)
    }
  	return (
    	<TextField 
        {...input} {...custom} 
        onChange={ newOnChange }
      />
    );
  }
  return (
   <form onSubmit={ handleSubmit(onSubmit) } >
     <div>
       First Name
       <Field 
         name={`firstName`} 
         component={renderCustomField} 
         type='password' 
       />
       Last Name
       <Field name={`lastName`} component='input' type='text' /><br />
      </div>
     <input type="submit" value="Submit form!" />
   </form>
  );
}

const MyTestForm = reduxForm({
	form: 'myForm',
  onSubmit: (data) => console.log('submitting data', data)
})(MyForm);


// END EXAMPLE
ReactDOM.render(
  <MuiThemeProvider muiTheme={getMuiTheme()}>
	<Provider store={store}>
    <MyTestForm />
  </Provider>
  </MuiThemeProvider>,
  document.getElementById('root')
);