reactjs - 尝试在 draftjs 文件中使用 getCurrentContent

Question

我想获取我的编辑器的内容并最终将其存储到 const 内容中。我收到 _draftJs.EditorState.getCurrentContent is not a function 的错误。

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

导入 convertToRaw convertToRaw(this.state.editorState.getCurrentContent())

Answer 3

假设我们有一个用于保存数据的保存按钮。此外，我们需要导入Draft-js 提供的模块convertFromRaw。convertToRaw

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')
)