javascript - ReactJS如何访问组件的内容输出？

Question

我目前正在开发一个使用 QuillJS 作为富文本编辑器的项目。我需要将富文本内容发布到我的后端，但我不确定如何访问 QuillJS 输出。

在 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;

我正在尝试更新问题的状态，但似乎没有更新。console.log(question)只输出一个字符串。

如何从 RichTextEditor.js 访问相同的字符串输出？

标签： javascriptreactjsquill

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和onChangeprops 到 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>
    );
  }
}