Редактор в Draft JS может извлекать существующие данные, но не позволяет пользователю редактировать / вводить данные - PullRequest
Новая
       49

Редактор в Draft JS может извлекать существующие данные, но не позволяет пользователю редактировать / вводить данные

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

Я использую черновик JS, и моя цель - использовать редактор таким образом, чтобы он извлекал данные из базы данных, отображал их, а также позволял пользователю вводить данные.

Я подключил editorState в качестве опоры в моем контейнере и передал его в мой компонент Editor. Однако это позволяет мне извлекать существующие данные в базе данных, но когда я go что-то набираю, я не могу это сделать. Пожалуйста, сообщите. 

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

...
...