Question

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

现在，我的组件看起来像这样：

＆＃13;

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}
      />
    )
  }
}

＆＃13;

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

我愿意采用任何[新]方法来处理这种情况;我只需要能够发送HTML值并获取HTML值。我也接受其他WYSIWYG插件的指示，这些插件将完成这项工作。

Answer 1

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

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

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

抽象draft-js到自定义组件，只处理html I / O.

1 个答案: