Two direction data binded Textbox

gistfile1.txt

import bemmer from 'bemmer';
import React  from 'react';

const AxuiTextbox = React.createClass({
  propType: {
    value:      React.PropTypes.func,
    onChange:   React.PropTypes.func,
    onKeyDown:  React.PropTypes.func,
    onKeyUp:    React.PropTypes.func,
    onKeyPress: React.PropTypes.func,
    onSubmit:   React.PropTypes.func,
  },

  getDefaultProps() {
    return {
      value:      '',
      onChange:   function() {},
      onKeyDown:  function() {},
      onKeyUp:    function() {},
      onKeyPress: function() {},
      onSubmit:   function() {},
    };
  },

  getInitialState() {
    return {
      value: this.props.value,
    };
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ value: nextProps.value });
    }
  },

  onChange(e) {
    const value = e.target.value;

    this.setState({ value });
    this.props.onChange(e, value);
  },

  onKeyDown(e) {
    if (e.keyCode === 13) this.props.onSubmit(e, this.props.value);

    this.props.onKeyDown(e);
  },

  render() {
    const c = bemmer('axuiTextbox', this.props.className);

    return (
      <input
        className={c()}
        onChange={this.onChange}
        onKeyDown={this.onKeyDown}
        onKeyUp={this.props.onKeyUp}
        onKeyPress={this.props.onKeyPress}
        type="text"
        value={this.state.value}
        placeholder={this.props.placeholder}
        ref={this.props.ref}
      />
    );
  },
});

export default AxuiTextbox;