在React中单击按钮后添加Bootstrap卡

Question

每当用户单击“添加卡”时，我都在创建卡，它应该调用名为AddCard的函数并创建另一张卡，但是在控制台中似乎出现以下错误： TypeError: this is undefined

这是我的Card.Js文件：

    import React, { Component } from 'react';
import { Card, Button } from 'react-bootstrap';


export class MyCard extends React.Component {
    constructor(props) {
        super(props)
    }
  AddCard = function () {
      return(
          console.log("I am Clicked"),
        <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
            <Card.Title>Card Title</Card.Title>
            <Card.Text>
                Some quick example text to build on the card title and make up the bulk of
                the card's content.
            </Card.Text>
            <Button variant="primary">Go somewhere</Button>
            </Card.Body>
            </Card>
      )

  }
    render() {
        return (
            <Button type='submit' onClick={function(){this.AddCard()}}>Add Card</Button>


        )
    }
}