我有一個表格。我想在卸載表單組件之前顯示警告。
組件是這樣的 -
import React from "react";
export default function FormComp() {
const sub = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
console.log(formData.get("name"));
//API CALL HERE
};
return (
<div className="test">
<form onSubmit={sub}>
<input name="name" />
<button type="submit">Submit</button>
</form>
</div>
);
}
如果在用戶轉到其他路線時卸載組件，我如何顯示不會保存表單更改的警告（以及是和否選項）。一旦FormComp組件被卸載，表單資料就會被清除。
uj5u.com熱心網友回復：
你在使用反應路由器嗎？這很容易。
如果是，那么您可以執行以下操作：
import { Prompt } from 'react-router'
const FormCompComponent = () => (
<>
<Prompt
when={formIsHalfFilledOut}
message='You have unsaved changes, are you sure you want to leave?'
/>
{/* Component JSX here */}
</>
)
有關更多詳細資訊，請查看：https ://v5.reactrouter.com/core/api/Prompt
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/439741.html
標籤：javascript 反应 形式
上一篇：如何縮放到背景而不是其子元素
下一篇：一個php頁面中的三個表單操作