Как передать существующий контент в редактор Draft JS через props? - PullRequest
Новая
       22

Как передать существующий контент в редактор Draft JS через props?

0 голосов
/ 19 июня 2020

Я знаю, что могу установить существующий контент с помощью редактора Draft JS, используя createWithContent в моем компоненте. Так что это работает нормально. 

var content = stateFromHTML(this.props.notesInitial);
this.state = this.props.notesInitial === '' ? {editorState: EditorState.createEmpty()} : {editorState: EditorState.createWithContent(content)};

Я хотел бы иметь возможность структурировать свой код так, чтобы я мог передавать контент через реквизиты. Однако когда я это сделал, хотя он и смог показать контент, он не позволил мне набрать текст в редакторе. Это ограничение с draft js? 

class NoteEditor extends Component {
  constructor(props) {
    super(props);
    this.handleKeyCommand = this.handleKeyCommand.bind(this);
  }
.........

  render() {
    const {handleSubmit} = this.props
    return (      
      <div className="note">        
        <form className="note__form form-group" onSubmit={handleSubmit(this.save.bind(this))}>
        <label>Notes</label>
          <div className="note__form--container panel panel-default">
            <div className="note__form__editor" onClick={this._onClick.bind(this)}>
              <Editor
                editorState={this.props.initialEditorState.editorState}
                handleKeyCommand={this.handleKeyCommand}
                onChange={this.onEditorChange.bind(this)} 
                stripPastedStyles
                ref="editor"
              />
            </div>      
           </div>
        </form>
      </div >
    )
  }

Мой контейнер выглядит следующим образом 

const mapStateToProps = (state) => {
    let initialEditorState;

    var notesInitial = decodeHTML(state.notes.content)

    const content = stateFromHTML(notesInitial);
    initialEditorState = notesInitial === '' ? {editorState: EditorState.createEmpty()} : {editorState: EditorState.createWithContent(content)};

    return {
      initialValues: {
        content: notesInitial
      },
      initialEditorState
    }
  }

...
...