如何为React.forwardRef组件添加onClick事件以打开模态框

我是一名电气工程师，正在使用JavaScript和TypeScript制作个人作品集，若问题较为基础还请见谅。我编写了如下React代码，通过React.forwardRef创建了通用父组件Works，用于生成工作经历卡片，当前代码可正常运行。我尝试为带有works-card类的子元素添加onClick事件以打开一个简单的文本模态框，但出现错误提示需使用React.MouseEventHandler。我想咨询如何为这些子元素添加onClick事件，或是如何用MouseEventHandler重新声明该代码块？我已尝试添加onClick属性，但报错。

import React from 'react'
import { Github, Link, works } from '../../../library'
import { Headings } from '../../core/headings/headings'
import './style.css'

const Works = React.forwardRef<HTMLDivElement>((props, ref) => {
  return (
    <div ref={ref} className="works">
      {/*  Display the section title and subtitle */}
      <Headings title="Working" subtitle="Places I've Worked" />
      <div className="projects-grid">
        {works.map((work) => (
          <a
            className="works-card"
            target="_blank"
            key={work.title}
            rel="noreferrer"
            
          >
            <p className="project-name">{work.title}</p>
            <div className="project-language">
              {work.languages.map((language) => (
                <span key={language}>{language}</span>
              ))}
            </div>
          </a>
        ))}
      </div>
    </div>
  )
})

Works.displayName = 'Works'

export { Works }

解决方法 #

1. 定义符合类型要求的点击事件处理函数 #

因为使用TypeScript，需要确保onClick的事件处理函数匹配React.MouseEventHandler<HTMLAnchorElement>类型。可以直接在组件内定义类型明确的处理函数：

const handleCardClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
  // 阻止<a>标签默认跳转行为（如果不需要跳转则添加）
  e.preventDefault();
  // 这里编写打开模态框的逻辑，比如通过状态控制模态框显示
  const workTitle = e.currentTarget.dataset.workTitle;
  console.log(`打开${workTitle}的详情模态框`);
};

2. 将事件绑定到标签并传递数据 #

通过data-*属性传递当前工作经历的信息，同时绑定处理函数：

<a
  className="works-card"
  target="_blank"
  key={work.title}
  rel="noreferrer"
  onClick={handleCardClick}
  data-work-title={work.title}
  href={work.url || '#'} // 替换为实际链接，无链接则用#占位
>

3. 完整修改后的组件代码 #

import React from 'react'
import { Github, Link, works } from '../../../library'
import { Headings } from '../../core/headings/headings'
import './style.css'

const Works = React.forwardRef<HTMLDivElement>((props, ref) => {
  // 定义符合类型要求的点击处理函数
  const handleCardClick: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
    e.preventDefault();
    const workTitle = e.currentTarget.dataset.workTitle;
    // 此处添加打开模态框的具体逻辑，比如设置状态
    console.log(`准备展示${workTitle}的详情`);
  };

  return (
    <div ref={ref} className="works">
      <Headings title="Working" subtitle="Places I've Worked" />
      <div className="projects-grid">
        {works.map((work) => (
          <a
            className="works-card"
            target="_blank"
            key={work.title}
            rel="noreferrer"
            onClick={handleCardClick}
            data-work-title={work.title}
            href="#"
          >
            <p className="project-name">{work.title}</p>
            <div className="project-language">
              {work.languages.map((language) => (
                <span key={language}>{language}</span>
              ))}
            </div>
          </a>
        ))}
      </div>
    </div>
  )
})

Works.displayName = 'Works'

export { Works }

关键说明 #

• 类型标注：React.MouseEventHandler<HTMLAnchorElement>明确了函数是针对<a>标签的鼠标事件处理函数，TypeScript会自动推断参数e的类型为React.MouseEvent<HTMLAnchorElement>。
• 阻止默认行为：如果不需要<a>标签的跳转功能，必须调用e.preventDefault()，否则点击后会触发页面跳转。
• 数据传递：通过data-*属性可以方便地将当前工作项的信息传递给处理函数，用于模态框展示对应内容。

内容的提问来源于stack exchange，提问作者Condini