javascript类访问对象的函数

这是我第一次使用javascript类。我使用类返回html表单。提交表单时，我希望显示一个写有“已提交”的警告框。我在处理类时遇到问题，因为我的提交函数无法识别

export default class Contact extends AbstractView {
    
  constructor(){
    super();
    this.setTitle("Contact Us");
  }

  test(e){
    e.preventDefault();
    alert('submitted');
  }

  async getHTML(){
     return ` 
       <form method = "POST" onsubmit = "test(this)">
          <h2  > Send Message </h2>
          <div class = "inputBox">
            <input type = "text" name = "" required = "required" />
            <span> Full Name  </span>
          </div>
          <div class = "inputBox">
            <input type = "submit" name = "" value="Send"/>
          </div>
        </form>`;
  }


}

---

您已经表明，您正试图使用

getHtml

的结果，如下所示：

let content = await view.getHtml();
document.querySelector('#app').innerHTML = content;

（注意：在您的

联系人中，是
getHTML
，而不是
getHTML
；它们需要匹配，包括大写。）

这意味着HTML中的
onsubmit=“test（this）”
将尝试调用全局
test
函数，将form元素作为第一个参数传入。但是
test
方法不是全局函数，而是对象的方法（可能是通过
新联系人创建的方法）。此外，它希望它的第一个参数是事件对象，而不是表单元素

要实现这一点，您需要让DOM事件处理程序调用该特定对象的
test
方法，这是使用
onxyz
属性样式的事件处理程序无法做到的。它们只能调用全局函数

您可以使用后期处理元素的代码将事件处理程序附加到元素上。例如，假设您没有执行
data events=“submit=”test（this）”
，而是执行了
data events=“submit:test”
。则执行渲染的代码可以为您连接这些事件处理程序：

const content = await view.getHTML();
const app = document.querySelector("#app");
app.innerHTML = content;
// Find the elements we need to handle
const elements = app.querySelectorAll("[data-events]");
for (const element of elements) {
    // Get the events to hook up on this element
    const events = element.getAttribute("data-events").split(",");
    for (const event of events) {
        // Get the event name and method name
        const [eventName, methodName] = event.split(":");
        // Hook up the handler, using `Function.prototype.bind` to ensure that
        // `this` during the call refers to `view`.
        element.addEventListener(eventName, view[methodName].bind(view));
    }
    // (You could use `removeAttribute` here to remove the `data-events` attribute if you liked
}

然后，您的方法将被调用
this
引用您从中获取HTML的
Contact
实例。第一个参数将是事件对象。您可以通过
event.currentTarget
从中获取表单元素，但：

test(event) {
    const form = event.currentTarget;
    // ...
}

实例：


class Contact/*扩展了AbstractView*/{
title=“”；
构造函数（）{
//超级（）；
this.title=“联系我们”；
}
测试（事件）{
event.preventDefault（）；
log（`Submitted；this.title=${this.title}`）；
}
异步getHTML（）{
返回`
发送消息
全名
`;
}
}
（异步（）=>{
const view=新联系人（）；
const content=await view.getHTML（）；
const-app=document.querySelector（“app”）；
app.innerHTML=内容；
//找到我们需要处理的元素
const elements=app.queryselectoral（“[data events]”）；
for（元素的常量元素）{
//获取要连接到此元素的事件
const events=element.getAttribute（“数据事件”）.split（“，”）；
for（事件中的常量事件）{
//获取事件名称和方法名称
const[eventName，methodName]=event.split（“：”）；
//使用`Function.prototype.bind`连接处理程序，以确保
//调用期间的'this'指的是'view'。
元素。addEventListener（eventName，视图[methodName].bind（视图））；
}
//（如果愿意，可以在此处使用'removeAttribute'删除'data events'属性
}
})（）；
问题不在您显示的代码中，而是在调用具有
this.test（）的方法的代码中
在其中。在这种方法中，
这并不是您认为的那样，可能是因为中描述的问题。但是，如果这些问题似乎不适用于您的情况，请使用演示问题的工具更新您的问题，最好是使用堆栈片段运行的工具（
[]
工具栏按钮）；。@通知我，我将查看编辑。@T.J.Crowder此链接有一个巨大的示例，其中不包括在没有“This”的html元素中调用函数"关键字这是您可能遇到的问题的标准问题和答案。但是，请再次使用a编辑该问题以获得进一步帮助。此外，请记住，帮助您解决堆栈溢出问题的人是在他们自己的时间内，出于他们的善意而这样做的。@T.J.Crowder我刚刚编辑了我的问题。您可以查看如果您希望在Javascript中将HTML作为文本处理，这不是一个好主意。这是一个非常有限的方法，并且会引发关于文本转义的各种问题。您应该使用DOM API来构造DOM对象，通过编程方式向其添加事件侦听器；这样做可以直接传递函数引用和对象，而不是尝试将某个函数的名称作为文本传递。T.J.Crowder非常感谢。结果比想象的要复杂得多。我没有解决这个问题的经验
test(event) {
    const form = event.currentTarget;
    // ...
}