validate on blur for class component

I’m writing my React components using the new ES6 class syntax and the Formsy.HOC method. I’ve tried implementing validate on blur, but have been unable to get it to work.

Whenever I try typing into the input, no values get set. Here is my code:

import React, { Component } from 'react';
import { HOC } from 'formsy-react';

class FormInput extends Component {
  changeValue(event) {
    if (this.props.getErrorMessage() != null) {
      this.props.setValue(event.currentTarget.value);
    } else {
      if (this.props.isValidValue(event.target.value)) {
        this.props.setValue(event.target.value);
      } else {
        this.setState({
          _value: event.currentTarget.value,
          _isPristine: false
        });
      }
    }
  }

  blurValue(event) {
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    return (
      <div>
        <input type="text" onBlur={this.blurValue.bind(this)} onChange={this.changeValue.bind(this)} value={this.props.getValue() || ''} />
    );
  }
};

export default HOC(FormInput);

I’m sure the example on the wiki works using mixins, but how can I get it to work with the setup I have above?

[aesopwolf]

Give this a try:

import React, { Component } from 'react';
import { HOC } from 'formsy-react';

class FormInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      blurred: false,
    };
  }

  handleBlur() {
    this.setState({
      blurred: true,
    })
  }

  handleFocus() {
    this.setState({
      blurred: false,
    })
  }

  render() {
    var errorMessageFromBluring = this.state.blurred ? this.props.getErrorMessage() : '';
    return (
      <div>
        <p>{errorMessageFromBluring}</p>
        <input
          type="text"
          onFocus={this.handleFocus.bind(this)}
          onBlur={this.handleBlur.bind(this)}
          onChange={e => this.props.setValue(e.target.value)}
          value={this.props.getValue() || ''}
        />
      </div>
    );
  }
}

export default HOC(FormInput);

[Extra-lightwill]

@aesopwolf Really cool, this works. Thanks!