按下按钮时调用功能 - 反应

Question

我正在动态生成一些 HTML，并且我希望一些“事件”具有一个调用简单函数的 onclick 组件。我正在使用 react 和 typescript。

这就是我想象的可行：

function add_event(day: number, month: number, events: any) {
  let event_html = "";
  events[month].forEach((event: any) => {
    const event_date = new Date(event.activity_start_date);
    if (event_date.getMonth() == month && event_date.getDate() == day) {
      event_html += `<table><td onclick='select_event()' class='event'>${event.activity_name}</td></table>`;
    }
  });
  return event_html;
}

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

但是，我收到此错误“未捕获的 ReferenceError：未定义 select_event 在 HTMLTableCellElement.onclick"

我猜问题是这个函数只存在于这个本地 tsx 文件中，而不是 react 构建的 HTML 文件中。我该如何解决这个问题？

Answer 1

也许您可以将 select_event 函数内联到生成的 html 字符串中。

Answer 2

我认为你应该在使用 react 时返回 JSX 而不是字符串。这应该更实用。下面的代码应该可以帮助您掌握这个概念。

function add_event(day: number, month: number, events: any) {
  let event_html = events[month].map((event: any, index: number) => {
    const event_date = new Date(event.activity_start_date);
    if (event_date.getMonth() == month && event_date.getDate() == day) {
      return (<table key={index}><td onclick='select_event()' class='event'>${event.activity_name}</td></table>);
    }
  });
  return event_html;
}

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

return(<div>{add_event(day, month, events)}</div>)

以防万一您从服务器获取字符串 html 响应，在这种情况下尝试为表设置 id 并以这种方式监听点击事件。