Как мне отредактировать текст, созданный с помощью Quill, сохраненный с помощью Express / Mongo и обработанный на странице редактирования?

Question

Я создаю блог-сайт, используя React и Quill (реагировать-перо) для основной части текста.Я могу просто создавать, показывать и удалять сообщения в блоге, но я не могу их редактировать.

Я пытался использовать value={this.props.post.body} и defaultValue={this.props.post.body}, используя реаги-гусиное перо onChange, но безуспешно.В обоих случаях я могу отрисовать панель инструментов и текстовую область просто отлично, но с value я вижу отрендеренное тело, но я не могу изменить его, а с defaultValue я не вижу отрендеренный текстно может изменить его.

Чтобы было понятно, я хочу увидеть отредактированный HTML в редакторе и отредактировать его

class EditPost extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "",
      tagline: "",
      body: ""
    };

    this.onChange = this.onChange.bind(this);
    this.onChangeBody = this.onChangeBody.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(e) {
    const { match, history } = this.props;
    e.preventDefault();

    const updatedPost = {
      title: this.state.title,
      tagline: this.state.tagline,
      body: this.state.body,
      images: this.state.images
    };

    this.props.editPost(updatedPost, match.params.id, history);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  // this is the change event for the Quill component
  onChangeBody(value) {
    this.setState({ body: value });
  }

  // map the state to the properties passed down from Redux
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.getPost(this.props.match.params.id);
  }

  render() {
    const { post, comments } = this.props.posts;

    return (
      <div className="editPost">
        <div className="jumbotron-fluid">
          <div className="container">
            <h1 className="display-5 py-5 text-center">Edit Post</h1>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="col-md-8 offset-md-2">
              <form onSubmit={this.onSubmit}>
                <div className="form-group">
                  <label>Title</label>
                  <input
                    type="text"
                    name="title"
                    className="form-control"
                    placeholder="Enter a title for your post"
                    onChange={this.onChange}
                    defaultValue={post.title}
                  />
                </div>
                <div className="form-group">
                  <label>Tagline</label>
                  <input
                    type="text"
                    name="tagline"
                    className="form-control"
                    placeholder="Give your post a tagline"
                    onChange={this.onChange}
                    defaultValue={post.tagline}
                  />
                </div>

                <div className="form-group">
                  <ReactQuill
                    className=""
                    value={post.body} // value = uneditable text, defaultValue = no text but can write
                    onChange={this.onChangeBody}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="">Upload an image (not working yet)</label>
                  <input type="file" className="form-control-file" />    
                </div>

                <input type="submit" value="Submit" />
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Когда я использую value={this.props.post.body} Я получаю ошибку Указанный диапазон отсутствует в документе. , и мне не повезло.При использовании этого метода отображается отформатированное тело, но его нельзя редактировать.Использование defaultValue отображает пустую, но редактируемую текстовую область.