Блог

Я запустил редактор с некоторым содержимым, используя Draft.js. Начальное содержимое, определенное в состоянии, как показано в примере ниже. Как я могу заменить все содержимое новым содержимым при изменении состояния. В следующем примере, который я попробовал, state initData отображается как What is your name? , когда пользователь нажимает на input button , состояние меняется на Quel est votre nom? , и преобразованный контент должен заменить редактор.

 import React, { Component } from 'react';
import { EditorState, ContentState, convertFromHTML} from 'draft-js';

export default class DraftEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      initData: "What is your name?"           //Initial data and will be updated on button click
    };
    this.changeContent = this.changeContent.bind(this);

    const blocksFromHtml = this.state.initData;
    const html = blocksFromHtml;
    const blocksFromHTML = convertFromHTML(html)
    const content = ContentState.createFromBlockArray(
      blocksFromHTML.contentBlocks,
      blocksFromHTML.entityMap
    );
    this.state = { editorState: EditorState.createWithContent(content)};
    this.onChange = (editorState) => {
      this.setState({editorState});
    }
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  changeContent() {
    this.setState({ initData: "Quel est votre nom?" });   //This is the data that will be replaced the initial data
  }

  render(){
    return (
        <React.Fragment>
            <input type='button' value="change" onClick={this.changeContent} />
            <Editor editorState={editorState} />
        </React.Fragment>
    );
  }
}
  

Используйте contentState для инициализации редактора, а также для изменения исходного содержимого. Для инициализации вместо EditorState.createEmpty() добавления всех других строк кода в вашем конструкторе используйте:

 this.state = {
  editorState: EditorState.createWithContent(
               ContentState.createFromText('What is your name?')
              ),
};
  

Чтобы изменить эти данные в вашем обработчике кликов, выполните что-то вроде следующего:

       changeContent() {
        this.setState({
             editorState: EditorState.createWithContent(
                          ContentState.createFromText('Quel est votre nom?')
                          )
         });   
       }