javascript - 在 react 中单击div时需要找到一个代码来调用两个函数

Question

我基本上需要创建一个数组或列出已在此 div imgCard 中单击的项目。它适用于我必须在单击按钮时更新分数的游戏。如果它被点击不止一次，游戏就结束了。我唯一的猜测是我应该在 onClick 上传递两个函数并创建一个已点击项目的数组。

import React, { Component, Fragment } from 'react'
import Header from './components/header'
import characters from "./characters.json"
import ImageCard from "./components/ImageCard"
import Wrapper from './components/wrapper'

class Game extends Component { 
  state = { 
    characters,
    Header,
  }

  shuffle = () => {
    var array = this.state.characters;
    var ctr = array.length;
    var temp;
    var index;
    var isClicked = []

    while (ctr > 0) {
      index = Math.floor(Math.random() * ctr);
      ctr--;
      temp = array[ctr];
      array[ctr] = array[index];
      array[index] = temp;
    }

    this.setState({
        characters: array
    });
  };

  render() {
    return (
      <Fragment>
        <Header />
        <Wrapper>
          <div className="imgContainer" >
            {this.state.characters.map(character => (
              <div className="imgCard" onClick={this.onClick} showAlert={this.id}>
                <ImageCard
                  key={character.id}
                  image={character.image}
                  width={'120px'}
                >
                </ImageCard >
              </div>
            ))}
          </div>
        </Wrapper>
      </Fragment>
    );
  }
}

export default Game;

Answer 1

<div className="imgCard"
onClick={()=>{
  this.firstFunction();
  this.secondFunction();  //two functions are called in onClick callback
}}
showAlert={this.id}>
   <ImageCard
      key={character.id}
      image={character.image}
      width={'120px'}
   >
   </ImageCard >
</div>