Reactjs TypeError:无法读取属性'；名称'；未定义的反应

我有一个带有“标题”和“内容”的表格。内容位于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;

import React，{Component}来自“React”；
从“./firebase”导入firebase；
从“react quill”导入react quill；
导入“react quill/dist/quill.snow.css”；
从“react render html”导入renderHTML；
类AddArticle扩展组件{
构造函数（）{
超级（）；
this.ref=firebase.firestore（）集合（“文章”）；
此.state={
标题：“，
内容：“，
};
}
onChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
};
onSubmit=（e）=>{
e、 预防默认值（）；
const{title，content}=this.state；
这个.ref
.添加({
标题
内容,，
})
。然后（（docRef）=>{
这是我的国家({
标题：“，
内容：“，
});
this.props.history.push（“/”）；
})
.catch（（错误）=>{
console.error（“添加文档时出错：”，错误）；
});
};
render（）{
返回(









创建一篇新文章






标题：
内容：
提交
);
}
}
导出默认的AddArticle；

标题输入的onChange接收到一个包含名称和值的事件。
另一方面，纬管组件的onChange接收实际内容。
总之，您应该使用：

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

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

---

并将这些处理程序适当地传递给标题输入和羽毛笔组件。

您能对目标进行console.log并查看目标是什么吗？您的意思是这样的吗？console.log（如target）；对不起，我对这件事真的很陌生。是的，我昨天发现了这件事，所以从那以后我回答的每个问题都被打勾标记为“已结束”。不过你说得对，我需要回到你身边，其他人，对那些帮助过我的人也一样。