我有一個 React 表單，它有兩個提交按鈕，用 Axios 訪問兩個不同的端點。
當我嘗試獲取表單提交者的值（要命中的端點）時，在將 React 與 TS 結合使用時出現以下錯誤。
“事件”型別上不存在屬性“提交者”
我的代碼如下：
async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
const submitter = e.nativeEvent.submitter.value;
e.preventDefault();
checkedBox.length > 0 &&
(await axios
.post(
`${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
checkedBox
)
.then((response) => {
if (response.status === 200) {
setForceUpdate((current) => (current = 1));
}
})
.catch((error) => {
console.log(error);
}));
}
如果我將函式型別更改為 (e: React.BaseSyntheticEvent)，則會在 onSubmit 屬性上彈出另一個錯誤。
<form onSubmit={handleSubmit}>
錯誤是：
型別 '(e: BaseSyntheticEvent<HTMLFormElement, any, any>) => Promise' 不可分配給型別 'FormEventHandler'。引數 'e' 和 'event' 的型別不兼容。型別“FormEvent”不可分配給型別“BaseSyntheticEvent<HTMLFormElement, any, any>”。屬性“nativeEvent”的型別不兼容。“Event”型別缺少“HTMLFormElement”型別的以下屬性：acceptCharset、action、autocomplete、elements 和 294 more.ts(2322)
uj5u.com熱心網友回復：
如果您正在使用表單：
改變這個
async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
const submitter = e.nativeEvent.submitter.value;
}
對此
async function handleSubmit(e: FormEvent) {
const submitter = e.nativeEvent.submitter.value;
}
此外，您可能需要執行以下操作：e.nativeEvent?.submitter.value
uj5u.com熱心網友回復：
我通過洗掉表單元素來修復它，因為無論如何它對 axios 都是無用的，并且通過 onClicks 將所有按鈕轉換為普通按鈕，觸發 handleSubmit 函式。
我有它如下：
async function handleSubmit(e: React.SyntheticEvent<HTMLButtonElement>) {
const submitter = (e.target as HTMLButtonElement).value;
checkedBox.length > 0 &&
(await axios
.post(
`${process.env.REACT_APP_BACKEND_BASE}/update${submitter}tasks`,
checkedBox
)
.then((response) => {
if (response.status === 200) {
setForceUpdate((current) => (current = 1));
}
})
.catch((error) => {
console.log(error);
}));
}
按鈕如下：
<Button
type="button"
name="submit"
value="delete"
variant="outline-info"
onClick={handleSubmit}
size="lg"
className="text-center font-main-color"
> Button </Button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513594.html
下一篇：StoneDB主從切換實踐方案