Javascript 反应类型错误：无法读取属性'；文本'；未定义的

我正在做一个项目，但我真的坚持这个问题。为什么我会像TypeError一样出现这样的错误：无法读取未定义的属性“text”，当我的程序更新状态发生更改时，但当我单击提交按钮时，我发现这个错误，请帮助我解决

我的代码片段：

import React, { Component } from "react";
import { Form, Button, Input, Label } from "semantic-ui-react";

class FormField extends Component {
  constructor() {
    super();
    this.state = {};
  }

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

  handleSubmit(event) {
    event.preventDefault();
    const { text } = this.state;
    console.log(text);
  }

  textToCode() {}

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Field>
          <Label>Enter Text</Label>
          <Input
            name="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
        </Form.Field>

        <Form.Field>
          <Button
            type="submit"
          >
            Submit
          </Button>
        </Form.Field>

        <Form.Field>
          <input disabled />
        </Form.Field>
      </Form>
    );
  }
}

export default FormField;

import React，{Component}来自“React”；
从“语义ui react”导入{表单、按钮、输入、标签}；
类FormField扩展组件{
构造函数（）{
超级（）；
this.state={}；
}
handleChange=事件=>{
this.setState（{[event.target.name]：event.target.value}）；
};
handleSubmit（事件）{
event.preventDefault（）；
const{text}=this.state；
console.log（文本）；
}
textToCode（）{}
render（）{
返回(
输入文本
提交
);
}
}
导出默认表单字段；

未将handlesubmit正确传递给事件处理程序。您可以编写（）=>this.handlesubmit（）来代替。

的副本，但我把自己弄糊涂了，并取消了它。啊！

handleChange

和

handleSubmit

之间有很大区别。第一个是一个箭头函数，它将关闭此的正确值。另一个是一个方法，它的

this

由调用方式决定，当调用它时，

this

不是正确的值。请参阅以上问题的答案，了解您的做法。（我会在构造函数中使用

.bind

——用于

handleSubmit

和

handleChange

，使

handleChange

成为一种方法。）这是一种经常重复的方法。它不需要回答，它已经被反复回答过了（在其他地方）。