1

我有这个必须抽象draft-js编辑器的反应组件。我的 redux 商店将有这个description必须是常规 HTML 字符串的字段。编辑器应该能够获取valueHTML 字符串并将其解析为自己的内部内容（draftjs 内容）。更改内容时，它应该onChange使用最终的 HTML 内容触发 prop。换句话说，这个组件内部发生的事情应该对外界透明。

现在，我的组件如下所示：

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Editor, EditorState, ContentState, convertFromHTML } from 'draft-js'
import { stateToHTML } from 'draft-js-export-html'

export const getStateFromHTML = (html) => {
  const blocksFromHTML = html && convertFromHTML(html)
  if (blocksFromHTML) {
    const state = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap,
    )
    return EditorState.createWithContent(state)
  }
  return EditorState.createEmpty()
}

export default class WYSIWYG extends Component {
  static propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func,    
  }

  static defaultProps = {
    value: '',
    onChange: Function.prototype,
  }

  state = { editorState: null }

  componentWillMount() {
    this.setEditorState(this.props.value)
  }

  componentWillReceiveProps({ value }) {
    this.setEditorState(value)
  }

  onChange = (editorState) => {
    this.setState({ editorState })
    const rawData = stateToHTML(editorState.getCurrentContent())
    this.props.onChange(rawData)
  }

  setEditorState(value) {
    this.setState({ editorState: getStateFromHTML(value) })
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
      />
    )
  }
}

由于某种原因，这不起作用。似乎getCurrentContent在状态实际更新之前被调用。我实在想不通。

我对处理这种情况的任何[新]方法持开放态度；我只需要能够发送一个 HTML 值并输出一个 HTML 值。我也接受可以完成这项工作的其他所见即所得插件的迹象。

4

1 回答 1

0

setState可能是异步的。它应该被视为异步操作，即使大部分时间都没有注意到这一点。它安排对组件本地状态的更新。这可能是您面临的问题。

一种可能的解决方案是使用setState状态更新完成后将执行的回调。

  onChange = (editorState) => {
    this.setState(
      { editorState },
      () => {
        const rawData = stateToHTML(editorState.getCurrentContent())
        this.props.onChange(rawData)
      }
    )
  }
于 2017-06-30T09:29:01.460 回答