Question

按下按钮时调用函数 - 反应

2021-11-15

565

html reactjs typescript

我正在动态生成一些 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')
}

但是，我收到此错误“Uncaught ReferenceError：select_event 未在 HTMLTableCellElement.onclick 处定义”

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

Answer 1

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

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 并以此方式监听点击事件。

Answer 2

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

Huan

2021-11-15