Javascript 文本区域未呈现 React

我不知道为什么我的文本区域没有呈现如果有人能建议我遗漏了什么或者我做错了什么，我将永远感激.

我不确定我是否应该try 在应用程序中撕裂它.js文件.

我也确定我不需要导入应用程序.js文件到CardCheck.因为它是个子元素.

import "./App.css";
import React from "react";
import CardCheck from "./CardCheck";

class App extends React.Component() {
  state = {
    cardNumber: "",
  };

  handleChange = (event) => {
    this.setState({ cardNumber: event.target.value });
  };

  handleClick = () => {
    const { cardNumber } = this.state;

    this.setState({
      cardNumber: "",
    });
  };

  render() {
    const { cardNumber } = this.state;

    return (
      <div className="App">
        <h1>Taken Yo Money</h1>
        <CardCheck
          cardNumber={cardNumber}
          handleChange={this.handleChange}
          handleClick={this.handleClick}
        />
      </div>
    );
  }
}
export default App;


function CardCheck(props) {
  const { cardNumber, handleChange, handleClick } = props;

  return (
    <div className="TweetInput">
      <div className="bar-wrapper"></div>
      <textarea onChange={handleChange} value={cardNumber}></textarea>
      <footer>
        <button onClick={handleClick}>Enter Card Details</button>
      </footer>
    </div>
  );
}
export default CardCheck;