FormData对象在更改为箭头函数时引发错误-JavaScript

Question

我有一些JavaScriptfetch()代码，它将数据发送到MySQL数据库并防止硬页面刷新。后端代码是用PHP编写的。这一切都可以，但我决定将函数更改为ES6箭头函数，并且围绕FormData()对象出现了一个问题。

在下面的代码中，除了line 3上的函数外，所有函数都已更改为箭头函数。

当我将第3行上的更改为箭头功能，即i.addEventListener('submit', (e) => { ...时，我会收到以下错误消息：

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'

这似乎与CCD_ 5上下文有关？

当我删除this作为参数时，它在我的PHP中引发了一个错误，我得到了与$_POST['create-board-name']相关的Undefined index: create-board-name，其中"创建板名称"是提交到数据库的按钮的名称。

因此，我的问题是，如果箭头函数影响this的解释上下文，我如何将箭头函数与FormData()和fetch()一起使用？

JavaScript

if (form) {
form.forEach(i => {
i.addEventListener('submit', function(e) {
if (e.submitter && e.submitter.classList.contains('js-fetch-button')) {
e.preventDefault();
var formData = new FormData(this);
formData.set(e.submitter.name, e.submitter.value);
formData.set('json_response', 'yes'); // relates to json encoding in the PHP shown further down
fetch(
theURL, {
method: 'post',
body: formData
})
.then((response) => {
if (response.status === 200) {
response.json().then((json) => {
// --- stuff happens here
});
}
}).catch((error) => {
console.error(error);
})
}
})
}) 
}

PHP(我认为这不是问题所在(

虽然我不认为PHP是问题所在，但我已经将其包含在下面。基本上，当创建新的板时，它会更新数据库，然后将此信息作为JSON返回到页面，以便在创建后立即使用新的板信息(如有必要(。

// insert into database
$stmt = $connection->prepare(
"INSERT INTO boards (board_name, user_id) 
VALUES (:board_name, :user_id )"
);
$stmt->execute([
':board_name' => $create_board_name,
':user_id' => $sessionId
]);
// fetch as JSON
if(isset($_POST['json_response'])) {
$board_stmt = $connection->prepare(
"SELECT * FROM boards 
WHERE user_id = :user_id AND board_name = :board_name 
ORDER BY board_id DESC"
);
$board_stmt -> execute([
':user_id' => $sessionId,
':board_name' => $create_board_name
]); 
$board_row = $board_stmt->fetch();
header('Content-type: application/json');
echo json_encode($board_row);
exit;
}

Answer 1

当您将其更改为箭头函数时，this将引用箭头函数的定义上下文(类，另一个函数，您定义该代码的地方(，而不是单击的Form元素。

如何在箭头功能中访问表单数据：

1. 根据我所见，您已经引用了i变量中的Form元素，然后您可以做什么：

var formData = new FormData(i);

2. 另一个选项是在事件处理程序中使用事件的target选项

var formData = new FormData(e.target);