-
Notifications
You must be signed in to change notification settings - Fork 218
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}
/>
};
};