Попытка использовать getCurrentContent в файле draftjs

Question

Я хочу получить содержимое моего редактора и в конечном итоге сохранить его в постоянном контенте. Я получаю сообщение об ошибке _draftJs.EditorState.getCurrentContent не является функцией.

import React from 'react'
import ReactDOM from 'react-dom'
import {Editor, EditorState, RichUtils} from 'draft-js'

const content = EditorState.getCurrentContent()
console.log('str= ', EditorState.getCurrentContent())
console.log('content=', content)
class MyEditor extends React.Component {
  constructor (props) {
    super(props)
    this.state = {editorState: EditorState.createEmpty()}
    this.onChange = (editorState) => this.setState({editorState})
    this.handleKeyCommand = this.handleKeyCommand.bind(this)
  }
  _onBoldClick () {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState,     'BOLD'))
  }
  _onUnderlineClick () {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'UNDERLINE'))
  }
  render () { 
    return (
      <div id='content'>
      <h1>Notejs</h1>
      <div id='editor'>
      <button onClick={this._onBoldClick.bind(this)}>Bold</button>
      <button onClick={this._onUnderlineClick.bind(this)}>Underline</button>
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
      </div>
      </div>
    )
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('app')
)

Answer 1

this.state.editorState.getCurrentContent() не EditorState.getCurrentContent()

Answer 2

import convertToRaw convertToRaw(this.state.editorState.getCurrentContent())

Answer 3

Предположим, что у нас есть кнопка сохранения для сохранения данных. Дополнительно нам нужно импортировать convertFromRaw а также convertToRaw модули, которые предоставляются draft-js.

import React from 'react'
import ReactDOM from 'react-dom'
import { Editor, EditorState, RichUtils, ContentState, convertFromRaw, convertToRaw} from 'draft-js';

class MyEditor extends React.Component {
  constructor (props) {
    super(props)
    this.state = {editorState: EditorState.createEmpty()}
    this.onChange = (editorState) => this.setState({editorState})
    this.handleKeyCommand = this.handleKeyCommand.bind(this)
  }

  _onBoldClick () {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState,'BOLD'))
  }

  _onUnderlineClick () {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState,'UNDERLINE'))
  }

  _onSave() {

    const contentState = this.state.editorState.getCurrentContent();
    const editorContentRaw = convertToRaw(contentState);

    /* we can save this editorContentRaw inside the DB. */

  }

  render () { 
    return (
      <div id='content'>
        <h1>Notejs</h1>
        <div id='editor'>
          <button onClick={this._onBoldClick.bind(this)}>Bold</button>
          <button onClick={this._onUnderlineClick.bind(this)}>Underline</button>
          <Editor editorState={this.state.editorState} onChange={this.onChange} />
          <button onClick={this._onSave.bind(this)}>Save</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('app')
)