TodoTextInput.react.js

/*  TodoTextInput.react

A react component that handles text input. It updates on
enter being pressed
*/
import React from 'react'
const ENTER_KEY_CODE = 13

class TodoTextInput extends React.Component {
  constructor(props) {
    super(props)
    this.className = props.className
    this.id = props.id
    this.placeholder = props.placeholder
    this.onSave = props.onSave
    this.state = {
      value: props.value || '',
    }
  }

  _save() {
    this.onSave(this.state.value)
    this.setState({
      value: '',
    })
  }

  _onChange(event) {
    this.setState({
      value: event.target.value,
    })
  }

  _onKeyDown(event) {
    if (event.keyCode === ENTER_KEY_CODE) {
      this._save()
    }
  }
  render() {
    return (
      <input type="text" className={this.className} id={this.id} onBlur={this._save.bind(this)} onChange={this._onChange.bind(this)} onKeyDown={this._onKeyDown.bind(this)} placeholder={this.placeholder} value={this.state.value}/>
    )
  }
}

export default TodoTextInput