例如,用户编辑了表单,在提交之前,却无意中点击了其他页面链接,前往新的页面后,之前编辑的数据将全部丢失。
为了阻止类似的现象发生,可以使用 react-router-dom
提供的 Prompt
组件。Prompt 会自动监视用户是否离开页面。 如果满足某个条件,它会在允许离开之前显示警告。
此功能类似于 Vue 的 Navigation Guard。
Prompt
带有两个属性,when
和 message
,当 when
为true
且用户离开当前页面时显示message
。
首先:
import { Prompt } from "react-router-dom";
然后,监听 form 表单 onFocus
事件,输出Prompt 组件。
此外,为了防止用户提交表单时同样出现警告,button 要监听 onClick
事件,重设 state。相应的代码不能放在 onSubmitHandler 函数里,时间太晚无法取消Prompt,所以必须另写一个函数。
<Prompt
when={isEntering}
message={(location) =>
"确定要离开当前页面吗? 未保存的数据将全部丢失!"
}
/>
代码举例:
import { useRef, useState, Fragment } from "react";
import { Prompt } from "react-router-dom";
import Card from "../UI/Card";
import LoadingSpinner from "../UI/LoadingSpinner";
import classes from "./QuoteForm.module.css";
const QuoteForm = (props) => {
const [isEntering, setIsEntering] = useState(false);
const authorInputRef = useRef();
const textInputRef = useRef();
function submitFormHandler(event) {
event.preventDefault();
const enteredAuthor = authorInputRef.current.value;
const enteredText = textInputRef.current.value;
props.onAddQuote({ author: enteredAuthor, text: enteredText });
}
const formFocusedHandler = () => {
setIsEntering(true);
};
const finishEnteringHandler = () => {
setIsEntering(false);
};
return (
<Fragment>
<Prompt
when={isEntering}
message={(location) =>
"Are you sure you want to leave? All your entered data will be lost!"
}
/>
<Card>
<form
onFocus={formFocusedHandler}
className={classes.form}
onSubmit={submitFormHandler}
>
{props.isLoading && (
<div className={classes.loading}>
<LoadingSpinner />
</div>
)}
<div className={classes.control}>
<label htmlFor="author">Author</label>
<input type="text" id="author" ref={authorInputRef} />
</div>
<div className={classes.control}>
<label htmlFor="text">Text</label>
<textarea id="text" rows="5" ref={textInputRef}></textarea>
</div>
<div className={classes.actions}>
<button onClick={finishEnteringHandler} className="btn">
Add Quote
</button>
</div>
</form>
</Card>
</Fragment>
);
};
export default QuoteForm;