formData 允许 e.target, e.currentTarget 但不允许 'this'... 为什么?

时间:2021-06-04 16:49:10

标签: javascript forms form-data

我有一个表单,我正在尝试使用 formData.. 在提交时,我通过将 DOM 中的“表单”作为参数传递来创建了 formData 对象。现在我可以将此参数作为 e.target、e.currentTarget 传递并且它工作正常..但是当我使用 'this' 关键字时,它显示为未定义。为什么?

这是我的代码笔链接.. https://codepen.io/alimbolar/pen/GRWxwzN

const myForm = document.getElementById('myForm');

myForm.addEventListener('submit', (e) => {
  e.preventDefault();

  // uncomment the line below to check 'this' in the console
  // console.log(this)

  const myFormData = new FormData(e.target);
  const dataArray = [...myFormData];
  const data = Object.fromEntries(dataArray);
  console.log(data.name);
  console.log(data.email);
  console.log(data.password)


});
.container form {
  width: 50%;
  margin: auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  padding: 2em;
  >label,
  button {
    margin-top: 1em;
    text-transform: uppercase;
    font: 1.5em Monospace;
    color: grey;
  }
}
<div class="container">
  <form id="myForm" action="">
    <label for="name">
    Name
  </label>
    <input type="text" id="name" name="name" value="Alim Bolar">

    <label for="email">Email
    </label>
    <input type="email" id="email" name="email" value="alim@alim.com">
    </label>

    <label for="password">Password
  </label>

    <input type="password" id="password" name="password" value="alim123">

    <button type="submit">Submit</button>

  </form>
</div>

您可能需要在提交时在控制台中看到结果.. 请帮助我理解为什么在这种情况下“this”不等于 e.currentTarget 或 e.target。

0 个答案:

没有答案