Skip to content

Use 'Enter' key to exit editing

Jeffrey Ji edited this page Jun 27, 2020 · 1 revision

We can use the ref to lose focus on the element.

import React from 'react'
import ContentEditable from 'react-contenteditable'

class MyComponent extends React.Component {
  constructor() {
    super()
    this.contentEditable = React.createRef();
    this.state = {html: "<b>Hello <i>World</i></b>"};
  };

  handleChange = evt => {
    this.setState({html: evt.target.value});
  };

  handleKeyDown = evt => {
    const { key } = evt;
    switch (key) {
      case 'Enter':
        this.contentEditable.current.blur();
        break;
    }
  }

  render = () => {
    return <ContentEditable
              innerRef={this.contentEditable}
              html={this.state.html}
              onChange={this.handleChange}
              onKeyDown={this.handleKeyDown}
            />
  };
};
Clone this wiki locally