React动态生成HTML绑定onclick事件提示函数未定义如何解决？

问题根本原因 #

你用字符串拼接的HTML插入到页面时，onclick='select_event()' 是原生HTML的内联事件，只会在全局window对象下查找select_event函数，但你定义的select_event是TSX文件内部的局部函数，构建后不会暴露到全局，所以触发事件时找不到对应的方法。

推荐解决方案：改用React JSX动态渲染元素 #

这是最符合React开发范式的方案，既能天然绑定组件内的事件函数，也能避免XSS风险：

// 把原来返回HTML字符串的方法改成返回JSX元素组件
function AddEvent({ day, month, events }: { day: number; month: number; events: any }) {
  const select_event = () => {
    console.log('selected');
  };

  return (
    <>
      {events[month]
        .filter((event: any) => {
          const event_date = new Date(event.activity_start_date);
          return event_date.getMonth() === month && event_date.getDate() === day;
        })
        .map((event: any, index: number) => (
          <table key={index}>
            <td onClick={select_event} className="event">
              {event.activity_name}
            </td>
          </table>
        ))}
    </>
  );
}

你在需要渲染对应内容的位置直接调用<AddEvent day={你的日期参数} month={你的月份参数} events={你的事件数组} />即可，不需要再手动处理innerHTML插入逻辑。

特殊场景解决方案：必须使用innerHTML时的处理 #

如果确实因为业务需求必须用拼接HTML字符串的方式实现，可以选以下两种方案：

方式1：将事件函数暴露到全局window #

把要调用的函数挂载到window对象上，注意组件卸载时要清除全局挂载的函数，避免内存泄漏和全局冲突：

import { useEffect } from 'react';

// 组件挂载时挂载全局函数
useEffect(() => {
  (window as any).select_event = select_event;
  // 卸载时清除全局函数
  return () => {
    delete (window as any).select_event;
  };
}, []);

function select_event(){
  console.log('selected')
}

方式2：使用事件委托 #

在插入HTML的父容器上绑定点击事件，通过类名判断触发对应逻辑，不需要暴露全局函数：

// 给你插入event_html的父元素绑定点击事件
function parentClickHandler(e: React.MouseEvent) {
  if ((e.target as HTMLElement).classList.contains('event')) {
    select_event();
  }
}

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