如何在点击卡片时调用函数- MERN堆栈

// 前端组件
import React from 'react';

class Card extends React.Component {
  handleClick = () => {
    // 发送点击卡片的请求给后端
    fetch('/api/cardClick', {
      method: 'POST',
      body: JSON.stringify({ cardId: this.props.cardId }),
      headers: { 'Content-Type': 'application/json' },
    })
      .then(response => response.json())
      .then(data => {
        // 在收到后端响应后执行的操作
        console.log('Card click response:', data);
        // 其他操作...
      })
      .catch(error => {
        console.error('Error:', error);
      });
  };

  render() {
    return (
      <div onClick={this.handleClick}>
        {/* 卡片的内容 */}
        {this.props.cardContent}
      </div>
    );
  }
}

export default Card;

// 后端路由
const express = require('express');
const router = express.Router();

router.post('/api/cardClick', (req, res) => {
  const cardId = req.body.cardId;
  // 执行处理点击事件的函数
  const result = handleClick(cardId);
  // 返回响应给前端
  res.json({ result });
});

// 处理点击事件的函数
function handleClick(cardId) {
  // 在这里执行特定的操作
  // 可以调用其他函数、更新数据库等
  console.log('Handling card click:', cardId);
  // 返回处理结果
  return 'success';
}

module.exports = router;