我有一个表单,我正在尝试使用 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。