MUI react-formal setup https://github.com/jquense/react-formal/issues/60#issuecomment-226895282

events.js

function target<E> (e:Event, t:E):E {
  if (e.target instanceof t) {
    // Now we know it's an <input />, with a `value` property.
    return e.target
  } else {
    throw new Error(`Expected Event target to be ${t} but found ${typeof e.target}`)
  }
}

export default { target }

reactFormalInputs.js

import React from 'react'
import TextField from './TextField'
import Form from 'react-formal'

const types = {
  text: TextField,
  string: TextField,
  password: TextField
}

Form.addInputTypes(types)

Signin.js

// @flow
import React, {Component, PropTypes} from 'react'
import {withRouter} from 'react-router'
import {security} from '../../../lib/security/security'
import Form from 'react-formal'
import yup from 'yup'
import Helmet from 'react-helmet'
import Logger from '../../../lib/util/logger'
import autobind from 'autobind-decorator'

const dString = yup.string().default('')
const schema = yup.object({
  email: dString.default('joe@example.com').required('Please enter your email address'),
  password: dString.default('password1').required('Please enter your password')
})

type Props = {
  router:Object,
  location:Object
}

type State = {
  error:boolean
}

class Signin extends Component<void, Props, State> {
  log:Logger = new Logger(this)
  props:Props
  state:State = {
    error: false
  };

  @autobind
  handleChange (formValue) {
    this.log.debug('form onChange')
  }

  @autobind
  handleFieldChange (e:Event) {
    this.log.debug('field onChange')
  }

  @autobind
  handlFieldeBlur (e:Event) {
    this.log.debug('field onBlur')
  }

  @autobind
  handleSubmit (formValue) {
    security.signin(formValue.email, formValue.password, () => {
      if (!security.isSignedIn()) {
        return this.setState({ error: true })
      }

      security.continueAfterSignin(this.props.router)
    })
  }

  render () {
    return (
      <Form schema={schema} defaultValue={schema.default()} onSubmit={this.handleSubmit} onChange={this.handleChange}>
        <div>
          Email address validation: <Form.Message for='email' />
        </div>
        <Helmet title='Sign in' />

        <label htmlFor='email'>Email</label>
        <Form.Field name='email' placeholder='Email' onChange={this.handleFieldChange} onBlur={this.handlFieldeBlur}/>

        <label>Password</label>
        <Form.Field name='password' placeholder='Password' type='password' />
        <Form.Message for='password' />

        <Form.Button type='submit'>Submit</Form.Button>
        {this.state.error && (
          <p>Bad signin information</p>
        )}
      </Form>
    )
  }
}

export default withRouter(Signin)

TextField.js

// @flow
import React, {Component, Element} from 'react'
import autobind from 'autobind-decorator'
import Events from '../ui/events'
import Logger from '../util/logger'
import {TextField as MuiTextField} from 'material-ui'

declare function ValueHandler (value:string):void

type Props = {
  value:?any,
  name:string,
  errors:?any,
  onChange:ValueHandler,
  onBlur:ValueHandler
}

type State = {}

/**
 * Create a controlled MUI TextField.  By default, the MUI component doesn't respond to standardized controlled inputs.
 * @see - https://facebook.github.io/react/docs/forms.html#controlled-components
 */
class TextField extends Component<void, Props, State> {
  log:Logger = new Logger(this)
  props:Props
  state:State;

  extractValue (e:Event):string {
    const target = Events.target(e, HTMLInputElement)
    return target.value
  }

  @autobind
  handleChange (e:Event) {
    this.log.debug('onChange')
    this.props.onChange(this.extractValue(e))
  }

  @autobind
  handleBlur (e:Event) {
    this.log.debug('onBlur')
    this.props.onBlur(this.extractValue(e))
  }

  @autobind
  handleKeyDown (e:Event) {
    // this.extractValue(e)
    // noop for now - depending on the field, we may want to propagate a change here - check behavior first
  }

  render ():Element {
    const { name, ...rest } = this.props
    if (name === 'email') {
      this.log.debug('errors', this.props.errors)
    }
    return (
      <MuiTextField
        {...rest}
        name={name}
        errorText='foo'
        onChange={this.handleChange}
        onKeyDown={this.handleKeyDown}
        onBlur={this.handleBlur}
      />
    )
  }
}

export default TextField