我还在学习React。我想做的是做一个卡时，点击显示随机图像从“const images”当我调用处理点击从“const DefaultCardContents 1”背面/图像我得到错误handleClick是没有定义。任何帮助是赞赏谢谢。

src\example\App.js
  Line 96:18:  'handleClick' is not defined  no-undef

Code is here...

import React, { Component } from 'react';
import Flippy, { FrontSide, BackSide } from './../lib';
import Rick from './rick.png';
import AmmoCard from './AmmoCard.png';
import BackpackCard from './BackpackCard.png';
import './App.css';
import { useState } from "react";


const images = [
  
  "https://via.placeholder.com/150/0000FF/808080",
  "https://via.placeholder.com/150/FF0000/FFFFFF",
  "https://via.placeholder.com/150/00FF00/000000"
];

function RandomImage() {
  const [currentImage, setCurrentImage] = useState(images[0]);

  const handleClick = () => {
    const randomIndex = Math.floor(Math.random() * images.length);
    setCurrentImage(images[randomIndex]);
  };
   };
  

const FlippyStyle = {
  width: '200px',
  height: '300px',
  textAlign: 'center',
  color: '#FFF',
  fontFamily: 'sans-serif',
  fontSize: '30px',
  justifyContent: 'center',
  paddingRight: '150px' ,
  paddingLeft: '150px'
}




const DefaultCardContents1 = ({ children }) => (


  <React.Fragment>
    <FrontSide
      style={{
        backgroundColor: '0',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column'
      }}
    >
      <img
        src={Rick}
        style={{ maxWidth: '130%', maxHeight: '100%' }}
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </FrontSide>
    <BackSide
      style={{
        backgroundColor: '',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
      }}>



      <img
        src={RandomImage}
        style={{ maxWidth: '130%', maxHeight: '100%' }}
        onClick={handleClick}
        
        
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </BackSide>
  </React.Fragment>);

  const DefaultCardContents2 = ({ children }) => (
  <React.Fragment>
    <FrontSide
      style={{
        backgroundColor: '0',
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column'
      }}
    >
      <img
        src={Rick}
        style={{ maxWidth: '130%', maxHeight: '100%' }}
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </FrontSide>
    <BackSide
      style={{
        backgroundColor: '',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column'
      }}>

       <img
        src={BackpackCard}
        style={{ maxWidth: '130%', maxHeight: '100%'}}
        
      />
      
      <span 
        style={{
          fontSize:'12px',
          position: 'absolute',
          bottom: '10px',
          width: '100%'
        }}>
        {children}<br />
        
      </span>
    </BackSide>
  </React.Fragment>);

  

const FlippyOnClick1 = ({ flipDirection = 'vertical' }) => (
  <Flippy
    flipOnClick={true}
    flipDirection={flipDirection}
    style={FlippyStyle}
    
  >
    <DefaultCardContents1>
      
    </DefaultCardContents1>
  </Flippy>
);

const FlippyOnClick2 = ({ flipDirection = 'vertical' }) => (
  <Flippy
    flipOnClick={true}
    flipDirection={flipDirection}
    style={FlippyStyle}
  >
    <DefaultCardContents2>
      
    </DefaultCardContents2>
  </Flippy>
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFlipped: false
    };

    setInterval(() => {
      this.setState({
        isFlipped: !this.state.isFlipped
      });
    }, 3000);
  }

  render() {
    return (
      
     <div className="App">
        <div style={{ display: 'flex', flex: '1 0 200px', justifyContent: 'center', 'flex-wrap': 'wrap' }}>
            
                             
          <FlippyOnClick1 />
          <FlippyOnClick2 />         
          
        </div>
      </div>

    );
  }
}
 export default App;

我期待着有一个随机的图像显示时，卡点击。