如何将参数传递给函数并仍然访问事件以防止默认

Question

我有一个简单的函数可以在项目管理应用程序中创建项目。提交表单时，我想调用这个函数，我想将 ID 传递到该函数，但我仍然想阻止事件默认。

这是我的代码现在的样子

<form onSubmit={() => addItem(list.id)}>
// And the function
const addItem = listId => {
event.preventDefault();
console.log(listId);
};

我也尝试在 addItem 函数中返回另一个函数，如下所示

const addItem = listId => {
return event => {
event.preventDefault();
console.log("Add item");
}
};

我想访问事件，但不确定谁正确设置参数。

Answer 1

你可以保留咖喱并像这样调用addItem：

<form onSubmit={addItem(list.id)}>

和：

const addItem = listId => {
return event => {
event.preventDefault();
console.log("Add item");
}
};

或

const addItem = listId => event => {
event.preventDefault();
console.log("Add item", listId);
};

Answer 2

只需将事件传递给处理程序

<form onSubmit={(evt) => addItem(evt, list.id)}>
const addItem = (event, listId) => {
event.preventDefault();
console.log(listId);
};

Answer 3

像这样：

<form onSubmit={(event) => addItem(list.id, event)}>
// And the function
const addItem = (listId, event) => {
event.preventDefault();
console.log(listId);
};

我使用的另一种选择是，我喜欢使用"选项"对象作为函数的最后一个参数，供杂项值或函数使用：

<form onSubmit={(event) => addItem(list.id, { event })}>
// And the function
const addItem = (listId, { event }) => {
event.preventDefault();
console.log(listId);
};