React Rich Text Editor - Clear state on ENTER

Question

I would like to clear the state of the React Rich Text Editor ( https://github.com/sstur/react-rte ) when pressing the enter-key.

My state looks like this:

state = {
    value: RichTextEditor.createEmptyValue()
}

The RichTextEditor component offers to provide the handleReturn prop. Thus, I have implemented the following handleReturn function:

handleReturn = () => {this.setState(prevState => ({
      ...prevState,
      value: RichTextEditor.createValueFromString("", "html")
    }));
}

When I trigger the handleReturn function from a button outside the RichTextEditor itself, it works perfectly and the state (and text input area) is properly cleared. However, when the same handleReturn is triggered from the enter-key it is not clearing the state; but I can see that the handleReturn function is correctly triggered. I pass the function in to the component like this:

<RichTextEditor handleReturn={this.handleReturn} value={this.state.value}
          onChange={this.onChange}/>

Any help is appreciated. Thanks!

UPDATE: I ended up implementing the underlying draft.js library ( https://draftjs.org/ ) directly instead. Was a pretty smooth process and it resolved this issue, by bypassing the use of react-rte . So would recommend switching if you have the possibility.

Answer 1

You can use event.preventDefault() method when 'Enter' key is pressed.

Here is a small example of how it works!

 class App extends React.Component { constructor(props) { super(props); this.state = { text: '' } this.handleChange = this.handleChange.bind(this); this.keypress = this.keypress.bind(this); } handleChange(event) { this.setState({text: event.target.value}); } keypress(e){ if(e.key === 'Enter'){ e.preventDefault(); this.setState({ send_message: this.state.text, text: '', }); } } render() { return ( <div> <textarea value={this.state.text} placeholder="Text" rows="1" className="form-textarea typing-area" onChange={this.handleChange} onKeyPress={this.keypress} /> <pre>{JSON.stringify(this.state, null, 2)}</pre> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>

Answer 2

This can help, kinda long for just resetting an input, but it works

 handleReturn = () => { let {editorState} = this.state; let contentState = editorState.getCurrentContent(); const firstBlock = contentState.getFirstBlock(); const lastBlock = contentState.getLastBlock(); const allSelected = new SelectionState({ anchorKey: firstBlock.getKey(), anchorOffset: 0, focusKey: lastBlock.getKey(), focusOffset: lastBlock.getLength(), hasFocus: true }); contentState = Modifier.removeRange(contentState, allSelected, 'backward'); editorState = EditorState.push(editorState, contentState, 'remove-range'); editorState = EditorState.forceSelection(contentState, contentState.getSelectionAfter()); this.setState({editorState});