InplaceEditableText.js

import React from 'react'
import './shared.css'
import InplaceEditable from './InplaceEditable'

export class InplaceEditableText extends Component{
  /**
   * @override
   * @type {string}
   */

   render() {
    <InplaceEditable  {...this.props}  renderNormal={this.renderNormal} renderEditing={this.renderEditing}>
   }

  componentClassnamePrefix = 'inplace-editable-text'

  renderNormal (editable) {
    return <span>{this.props.value}</span>
  }

  renderEditing (editable) {
    return <input className="ant-input"
                  value={editable.state.localValue}
                  onChange={e => editable.setState({localValue: e.target.value})}
                  onKeyDown={e=>this.onKeyDown(e,editable)}
                  autoFocus/>
  }

  onKeyDown = (e,editable) => {
    switch (e.keyCode) {
      case 27: // Escape
        editable.onCancel()
        break
      case 13: // Enter
        editable.onOK()
        break
      default:
        break
    }
  }
}