Блог

У меня есть форма с «заголовком» и «содержанием». Содержимое находится в компоненте ReactQuill, который позволяет вам создавать форматированный текст. Перед добавлением этого компонента мой «onChange» нормально работал для обоих «входных данных». Теперь, когда компоненты разные, это больше не работает.

Я получаю сообщение об ошибке ниже:

это код в AddArticle.js вот где находится форма:

 import React, { Component } from "react";
import firebase from "../Firebase";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import renderHTML from "react-render-html";

class AddArticle extends Component {
  constructor() {
    super();
    this.ref = firebase.firestore().collection("articles");
    this.state = {
      title: "",
      content: "",
    };
  }

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

  onSubmit = (e) => {
    e.preventDefault();

    const { title, content } = this.state;

    this.ref
      .add({
        title,
        content,
      })
      .then((docRef) => {
        this.setState({
          title: "",
          content: "",
        });
        this.props.history.push("/");
      })
      .catch((error) => {
        console.error("Error adding document: ", error);
      });
  };

  render() {
    return (
      <div className="container">
        <br></br>
        <br></br>
        <br></br>
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title text-center">Create a new article</h3>
          </div>
          <br></br>
          <br></br>
          <div className="panel-body">
            <form onSubmit={this.onSubmit}>
              <div className="form-group input-group-lg">
                <label for="title">Title:</label>
                <input
                  type="text"
                  className="form-control"
                  name="title"
                  value={this.state.title}
                  onChange={this.onChange}
                  placeholder="Title"
                />
              </div>
              <div className="form-group">
                <label for="content">Content:</label>
                <ReactQuill
                  theme="snow"
                  name="content"
                  value={this.state.content}
                  onChange={this.onChange}
                  placeholder="Content"
                />
              </div>
              <button type="submit" className="btn btn-success">
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default AddArticle;

  

onChange для ввода заголовка получает событие, содержащее имя и значение.
С другой стороны, onChange для компонента Quill получает фактическое содержимое.
В целом, вы должны использовать:

 onTitleChange = (e) => {
    this.setState({ title: e.target.value });
};

onContentChange = (content) => {
    this.setState({ content: content });
};
  

И передайте эти обработчики соответствующим образом вашему компоненту ввода заголовка и quill.