Résumé brouillon-js dans le composant personnalisé qui traite uniquement des E/S html

Question

J'ai ce composant de réaction qui doit résumer draft-js éditeur. Mon magasin Redux aura ce champ description qui doit être une chaîne HTML régulière. L'éditeur devrait être en mesure de prendre une chaîne HTML value et l'analyser dans ses propres choses internes (trucs draftjs). Lors de la modification du contenu, il doit déclencher onChange prop avec le contenu HTML final. En d'autres termes, il devrait être transparent pour le monde extérieur de ce qui se passe à l'intérieur de ce composant.

En ce moment, mon composant ressemble à ceci:

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

Par une raison quelconque, cela ne fonctionne pas. Il semble que getCurrentContent soit appelé avant que l'état ne soit réellement mis à jour. Je ne suis pas vraiment capable de penser ça.

Je suis ouvert à toute [nouvelle] façon de gérer cette situation; Je dois juste pouvoir envoyer une valeur HTML et obtenir une valeur HTML. J'accepte également les indications d'autres plugins WYSIWYG qui feront l'affaire.

Answer 1

setState peut être asynchrone. Il devrait être traité comme une opération asynchrone même si cela n'est pas remarqué la plupart du temps. Il planifie les mises à jour de l'état local du composant. Cela pourrait être le problème auquel vous faites face.

Une solution possible consiste à utiliser le rappel setState qui sera exécuté une fois la mise à jour d'état terminée.

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