创建没有构造函数和绑定错误的ReactJS类

我正在使用下面的代码，但当我在框中键入文本时，它会显示错误，这不会提供太多信息。我的目标是能够在文本框中键入和显示文本

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import CardMedia from '@material-ui/core/CardMedia';
import { withStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/core/CardActionArea';
import { Card, CardContent } from "@material-ui/core";
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Videocam from '@material-ui/icons/Videocam';
import TextField from '@material-ui/core/TextField';

const styles = (theme) => ({
    input: {
        display: 'none'
    }
});

class MediaCapture extends Component {
    state = {
        topText: '',
        bottomText: '',
    };    

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

    render() {
        return (
            <Fragment>                
                <Card >
                    <CardContent >
                      <TextField
                        id="standard-name"
                        label="Top Text"
                        name = "topText"
                        value={this.state.topText}
                        onChange={this.handleChange}
                        margin="normal"
                        variant="filled"
                      />                      
                    </CardContent>
                </Card>
            </Fragment>
        );
    }
}

export default withStyles(styles, { withTheme: true })(MediaCapture);

import React，{Component，Fragment}来自'React'；
从“道具类型”导入道具类型；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/CardActionArea”导入CardActionArea；
从“@material ui/core”导入{Card，CardContent}；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/PhotoCamera”导入光电摄像机；
从“@material ui/icons/Videocam”导入视频摄像机；
从“@material ui/core/TextField”导入TextField；
常量样式=（主题）=>({
输入：{
显示：“无”
}
});
类MediaCapture扩展组件{
状态={
topText:“”，
底部文本：“”，
};    
手变（活动）{
常量{name，value}=event.target
this.setState（{[name]：value}）
}
render（）{
返回(
);
}
}
使用样式导出默认值（样式，{withTheme:true}）（MediaCapture）；

尝试将

handleChange

声明为箭头函数，该函数会自动将其

this

绑定到当前上下文（与在构造函数中使用

this.handleChange=this.handleChange.bind（this）

所做的操作相同）

---

确切的错误是什么？这应该可以解决问题。还要提到的是，arrow函数只创建了一次，但是为该类的每个实例创建了“普通”函数。由于这个原因，箭头函数不能被忽略，但是内存占用要小得多。

handleChange = (event) => {