React函数式组件中点击事件未触发问题求助

嗨，我看了你的代码，问题其实很好解决——你在React组件里用错了点击事件的绑定方式！

核心问题分析 #

在React中，事件绑定属性是驼峰式命名的onClick，而不是原生HTML里的click；而且不能像原生HTML那样传字符串形式的"downloadFile(url)"，必须直接传递函数引用或者箭头函数。你原来的写法相当于给a标签加了一个名为click的普通属性，根本不会触发点击逻辑。

修改后的代码 #

我帮你把关键部分改好了，还加了一些实用的优化：

export const FileAttachment = memo(({ url, title, className, ...messageBubbleProps }) => {

  const downloadFile = (link) => {
    fetch(link, {
      method: 'GET'
    })
    .then(response => {
      // 新增：校验响应状态，避免请求失败还继续处理
      if (!response.ok) throw new Error('文件请求失败');
      return response.blob();
    })
    .then(blob => {
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = link.split('/').pop();
      document.body.appendChild(a);
      a.click();
      a.remove();
      // 新增：释放URL对象，避免内存泄漏
      window.URL.revokeObjectURL(url);
    })
    .catch(err => {
      // 新增：错误捕获，方便排查问题
      console.error('文件下载失败：', err);
      // 这里也可以加用户可见的提示，比如alert或者全局通知组件
    });
  }

  return (
    <MessageBubble className={createClassName(styles, 'file-attachment', {}, [className])} {...messageBubbleProps}>
      {/* 关键修改：把click换成onClick，用箭头函数传递参数 */}
      <a onClick={() => downloadFile(url)} rel='noopener noreferrer' className={createClassName(styles, 'file-attachment__inner')}>
        <FileAttachmentIcon url={url} />
        <span className={createClassName(styles, 'file-attachment__title')}>{title}</span>
        <DownloadIcon width={20} height={20} className={createClassName(styles, 'file-attachment__download-button')} />
      </a>
    </MessageBubble>
  )
});

额外说明 #

1. 如果你想避免每次渲染都创建新的箭头函数，可以用useCallback包裹downloadFile（不过这属于性能优化，当前场景下不是必须的）；
2. 新增的错误处理和内存释放是为了让代码更健壮，避免出现隐藏问题。

备注：内容来源于stack exchange，提问作者Lakshmi Praneeth