ReactJS 如何從組件訪問內容 output？

Question

我目前正在開發一個使用 QuillJS 作為富文本編輯器的項目。 我需要將富文本內容發布到我的后端，但我不確定如何訪問 QuillJS output。

在 RichTextEditor.js 中

import React, { Component } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
class RichTextEditor extends Component {
  constructor(props) {
    super(props);
    // this.formats = formats;
    this.state = { text: "" }; // You can also pass a Quill Delta here
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({ text: value });
    const text = this.state;
    console.log(text);
  }

  render() {
    return (
      <ReactQuill
        value={this.state.text}
        onChange={this.handleChange}
        formats={this.formats}
        modules={this.modules}
      />
    );
  }
}
export default RichTextEditor;

console.log(text)基本上只是輸出富文本編輯器的內容。 像這樣的"<p><em>aasdasdasd</em><strong><em>asdasdasdasd</em></strong></p>"

在 Post.js 中

import React, { Component } from "react";
import RichTextEditor from "./RichTextEditor.js";

import "../../css/Post.css";

class Post extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: "",
    };
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
    console.log(this.state);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const { question } = this.state;

    console.log("Question");
    console.log(question);

  render() {
    const { question } = this.state;

    return (
      <div className="post">
        <div className="post__container">
          <form onSubmit={this.handleSubmit}>
            <div className="post__richTextEditor">
              <RichTextEditor value={question} onChange={this.onChange} name="question" />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Post;

我正在嘗試更新問題的 state，但它似乎沒有更新。 console.log(question)只輸出一個字符串。

如何從 RichTextEditor.js 訪問相同的字符串 output？

Answer 1

您的 RichTextEditor 組件不應該處理更改，它應該只接收來自更高組件的道具：

class RichTextEditor extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ReactQuill
        value={this.props.value}
        onChange={this.props.onChange}
        formats={this.formats}
        modules={this.modules}
      />
    );
  }
}
export default RichTextEditor;

然后您的 Post 組件將value和onChange道具傳遞給 RichTextEditor：

class Post extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: "",
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
    console.log(this.state);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const { question } = this.state;

    console.log("Question");
    console.log(question);

  render() {
    const { question } = this.state;

    return (
      <div className="post">
        <div className="post__container">
          <form onSubmit={this.handleSubmit}>
            <div className="post__richTextEditor">
              <RichTextEditor value={question} onChange={this.onChange} name="question" />
            </div>
          </form>
        </div>
      </div>
    );
  }
}

Answer 2

在RichTextEditor.js中

 handleChange(value) {
    this.setState({ text: value });
    const text = this.state;
    console.log(text);
    props.onChange(text); // passing the inner State to parent as argument to onChange handler
  }

現在在Post.js

onChange = (newStateString) => {
    //this.setState({ [e.target.name]: e.target.value });
    console.log(newStateString);  // you should get the string here
  };