首页 文章

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

提问于
浏览 次
1

我有这个反应组件，必须抽象 draft-js 编辑器 . 我的redux商店将拥有必须是常规HTML字符串的 description 字段 . 编辑器应该能够获取一个 value HTML字符串并将其解析为自己的内部事物（draftjs） . 更改内容时，应使用最终的HTML内容触发 onChange 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值 . 我也接受其他WYSIWYG插件的指示，这些插件将完成这项工作 .

reactjs redux immutable.js draftjs draft-js-plugins

1 回答

  • 0

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

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

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

相关问题