title: React onChange event doesnt return object
body: <p>i'm setting up a simple signup form with react and using an onChange handler to update state. the event argument caught by the onChange handler is a string and not an object . </p>
  
  <p>therefore i'm unable to access <code>event.target.value</code> or event <code>event.target</code>
  event simply yields my typed keywords</p>
  
  <p>this is the relevant snippet. </p>
  
  <pre><code>class SignUp extends Component{
  
    constructor(props){
      super(props);
      this.state = {
        username:'',
        password:''
      }
      this.handleChange = this.handleChange.bind(this)
    }
  
    handleChange(event){
      this.setState({...this.state,[event.target.name]:event.target.value})
  
    }
  
    render(){
      const signUp = this.props.signUp;
      return(
      &lt;form&gt;
        &lt;Card className={style.SignUpCard}&gt;
          &lt;CardTitle
            title="Sign Up"
            /&gt;
            &lt;CardActions&gt;
              &lt;Input type="text" label="username" value={this.state.username} placeHolder="Pick a username" maxLength={16} onChange={this.handleChange} name="username" value={this.state.username}/&gt;
            &lt;/CardActions&gt;
            &lt;CardActions&gt;
              &lt;Input type="password" label="password" value={this.state.password} placeHolder="password" onChange={this.handleChange} name="password" value={this.state.password}/&gt;
            &lt;/CardActions&gt;
            &lt;CardActions&gt;
              &lt;Button label="Sign Up" raised primary onClick={() =&gt; signUp(this.state.username,this.state.password)}/&gt;
            &lt;/CardActions&gt;
        &lt;/Card&gt;
      &lt;/form&gt;
      )
    }
  }
  
  export default SignUp;
  </code></pre>
  
  <p>my errors in console </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'name' of undefined
  </code></pre>
  
  <p>the Input field is a react-toolbox component</p>
  
  <pre><code>class Input extends React.Component {
    static propTypes = {
      children: React.PropTypes.any,
      className: React.PropTypes.string,
      disabled: React.PropTypes.bool,
      error: React.PropTypes.string,
      floating: React.PropTypes.bool,
      hint: React.PropTypes.string,
      icon: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.element
      ]),
      label: React.PropTypes.string,
      maxLength: React.PropTypes.number,
      multiline: React.PropTypes.bool,
      onBlur: React.PropTypes.func,
      onChange: React.PropTypes.func,
      onFocus: React.PropTypes.func,
      onKeyPress: React.PropTypes.func,
      required: React.PropTypes.bool,
      type: React.PropTypes.string,
      value: React.PropTypes.any
    };
  
    static defaultProps = {
      className: '',
      hint: '',
      disabled: false,
      floating: true,
      multiline: false,
      required: false,
      type: 'text'
    };
  
    handleChange = (event) =&gt; {
      if (this.props.onChange) this.props.onChange(event.target.value, event);
    };
  
    blur () {
      this.refs.input.blur();
    }
  
    focus () {
      this.refs.input.focus();
    }
  
    render () {
      const { children, disabled, error, floating, hint, icon,
              label: labelText, maxLength, multiline, required,
              type, value, ...others} = this.props;
      const length = maxLength &amp;&amp; value ? value.length : 0;
      const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
  
      const className = ClassNames(style.root, {
        [style.disabled]: disabled,
        [style.errored]: error,
        [style.hidden]: type === 'hidden',
        [style.withIcon]: icon
      }, this.props.className);
  
      const valuePresent = value !== null &amp;&amp; value !== undefined &amp;&amp; value !== '' &amp;&amp; !Number.isNaN(value);
  
      const InputElement = React.createElement(multiline ? 'textarea' : 'input', {
        ...others,
        className: ClassNames(style.input, {[style.filled]: valuePresent}),
        onChange: this.handleChange,
        ref: 'input',
        role: 'input',
        disabled,
        required,
        type,
        value,
        maxLength
      });
  
      return (
        &lt;div data-react-toolbox='input' className={className}&gt;
          {InputElement}
          {icon ? &lt;FontIcon className={style.icon} value={icon} /&gt; : null}
          &lt;span className={style.bar}&gt;&lt;/span&gt;
          {labelText
            ? &lt;label className={labelClassName}&gt;
                {labelText}
                {required ? &lt;span className={style.required}&gt; * &lt;/span&gt; : null}
              &lt;/label&gt;
            : null}
          {hint ? &lt;span className={style.hint}&gt;{hint}&lt;/span&gt; : null}
          {error ? &lt;span className={style.error}&gt;{error}&lt;/span&gt; : null}
          {maxLength ? &lt;span className={style.counter}&gt;{length}/{maxLength}&lt;/span&gt; : null}
          {children}
        &lt;/div&gt;
      );
    }
  }
  
  export default Input;
  </code></pre>