perfect react material ui form code example
Example: material ui form control submit
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import TextField from 'material-ui/TextField'
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'
import Checkbox from 'material-ui/Checkbox'
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'
import asyncValidate from './asyncValidate'
const validate = values => {
const errors = {}
const requiredFields = [ 'firstName', 'lastName', 'email', 'favoriteColor', 'notes' ]
requiredFields.forEach(field => {
if (!values[ field ]) {
errors[ field ] = 'Required'
}
})
if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}
return errors
}
const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
)
const renderCheckbox = ({ input, label }) => (
)
const renderRadioGroup = ({ input, ...rest }) => (
input.onChange(value)}/>
)
const renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
input.onChange(value)}
children={children}
{...custom}/>
)
const MaterialUiForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
)
}
export default reduxForm({
form: 'MaterialUiForm', // a unique identifier for this form
validate,
asyncValidate
})(MaterialUiForm)