handleValueChange.md

handleValueChange

the original change handler, updateFormState, was passed an event

<Input formField='firstName'/>

export default class Input extends Component {
  render() {
    return (
      <div>
        <label>{this.props.label}</label>
        <input
          type={this.props.type || 'text'}
          value={this.props.fieldState.getValue()}
          onChange={this.props.updateFormState}
          />
        <span>{this.props.fieldState.getMessage()}</span>
      </div>
    );
  }
}

the new change handler, handleValueChange, is passed a value

export default class Input extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }

  render() {
    return (
      <div>
        <label>{this.props.label}</label>
        <input
          type={this.props.type || 'text'}
          value={this.props.fieldState.getValue()}
          onChange={this.onChange}
          />
        <span>{this.props.fieldState.getMessage()}</span>
      </div>
    );
  }

  onChange(e) {
    this.props.handleValueChange(e.target.value);
  }
}

in normal circumstances, updateFormState was less work for the user, particularly in the CheckboxGroup and Select input components.

however, for nonstandard inputs it created flawed choices.

handleValueChange remedies this problem.