initialValues ​​не работает для поля реакции-draft-wysiwyg (избыточная форма)

Question

Я пытаюсь использовать редакторact-draft-wysiwyg внутри redux-form, все работает как надо, но единственное, что initialValues ​​не работает для поля редактора.

Вот мой Форма. js:

    <form onSubmit={this.props.handleSubmit(this.onSubmit)} autoComplete="off">
        <Field name="title" className="form-input" type="text" placeholder="Title" component={this.titleComponent} />
        <Field name="description" className="desc" type="text" placeholder="What is your article about ?" component={this.titleComponent} />
      <Field name="editor" type="text" component={EditorFieldComponent} />
      <button className="form-button" type="submit" value="Submit">{this.props.button}</button>
    </form>

Вот компонент EditorField. js:

const EditorFieldComponent = (props) => {
      const { meta: {touched, error}, input } = props;    
      return(
        <EditorComponent
          onChange={input.onChange}
          value={input.value}
          touched={touched}
          error={error}
          input = {{...input}}
        />
      );

    }

А вот компонент Editor. js:

class EditorComponent extends React.Component {

      constructor(props) {
        super(props);
        this.state = {
          editorState: EditorState.createEmpty()
        };
        this.props.onChange(
          draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
        );
      }
  onEditorStateChange = (editorState) => {
    const { onChange, value } = this.props;

    const newValue = draftToHtml(convertToRaw(editorState.getCurrentContent()));

    if (value !== newValue) {
      onChange(newValue);
    }

    this.setState({
      editorState
    });
  };

  render(){

return(
    <React.Fragment>
      <Editor 
        editorState={this.state.editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorStyle={{ height: "500px", border: "solid 0.1px rgba(0, 0, 0, 0.1)", padding: "10px"}}
        onEditorStateChange={this.onEditorStateChange}
        toolbar={{
          options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'/*, 'emoji'*/, 'image', 'remove', 'history'],
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true }
        }}
      />
      {this.renderError()}
    </React.Fragment>
);}

Здесь я пытаюсь использовать initialValues:

  return(
    <div>
      <Form
       initialValues={{title: "some title", description: "some description", editor: "some text"}}
      />
    </div>
  );

Также я должен сказать, что initialValues ​​работает для полей 'description' и 'title', и только поле 'editor' имеет эта проблема.

Answer 1

Таким образом, проблема, кажется, находится внутри EditorComponent constructor(), где editorState по умолчанию установлено пустым (или я должен сказать сначала). И это, вероятно, перезаписывает наш initialValues для поля Editor.

   constructor(props) {
     super(props);
     this.state = {
       editorState: EditorState.createEmpty()
    };

Я не нашел решения для решения этой проблемы и, наконец, использовал initialValues, как предполагалось, но я нашел альтернативой для установки значения по умолчанию для редактора является строка HTML, которую мы считаем нужной. Вот ссылка на это решение: https://github.com/jpuri/react-draft-wysiwyg/issues/357