React Text Field Component

text_field.js

import React, { Component, PropTypes } from 'react';

const ENTER = 13;

export default class TextField extends Component {
  static get displayName() {
    return 'TextField';
  }

  static get propTypes() {
    return {
      onEnterKeyUpWithoutIME: PropTypes.func
    };
  }

  get value() {
    return this.refs.input.value;
  }

  set value(v) {
    this.refs.input.value = v;
  }

  handleKeyDown(event) {
    const {
      onKeyDown = () => {}
    } = this.props;
    onKeyDown(event);
    this.setState({keyDownCode: event.keyCode});
  }

  handleKeyUp(event) {
    const {
      onEnterKeyUpWithoutIME = () => {},
      onKeyUp = () => {}
    } = this.props;
    onKeyUp(event);
    if (event.keyCode === ENTER && this.state.keyDownCode === ENTER ) {
      onEnterKeyUpWithoutIME(event);
    }
  }
  render() {
    const props = Object.assign({}, this.props, {
      ref: 'input',
      type:'text',
      onKeyUp: this.handleKeyUp.bind(this),
      onKeyDown: this.handleKeyDown.bind(this)
    });
    delete props.onEnterKeyUpWithoutIME;
    return <input {...props}/>;
  }
}