在输入一些数据后离开页面之前提醒用户（特别是在 ReactJS 中）

Question

我正在创建一个页面，用户需要在其中输入详细信息才能将产品添加到产品列表中。如果用户在表单中输入一些数据后不小心移出该页面，则在移出之前必须征得用户的确认。但我正在为这个要求而苦苦挣扎。我正在使用 react-hook-form 将数据存储在 JSON 服务器中。

我正在使用一个状态 leave，如果它是真的那么在搬出之前提醒用户，否则什么都没有。

const [leave, setLeave] = useState(false);

现在，我不知道在哪里以及如何使用这种状态来显示离开前的警告框。这是我的表格，它将呈现。

render (
<Form onSubmit={handleSubmit(onSubmit)}>
   <Form.Row>
       <Form.Group as={Col} className="mr-5">
       <Form.Label column>Product Name</Form.Label>
       <Form.Control
            name="productName"
            placeholder="Enter product Name"
            required
            ref={register}
            />
       </Form.Group>
   </Form.Row>
   <Button variant="success" type="submit" className="text-white mt-5">
            Add New Product
   </Button>
</Form>

<Prompt when={Leave} message="Are you sure you want to leave ?" /> {/*Here I have promted*/}
);

为简单起见，我只给出了一个输入字段。现在onSubmit的函数定义如下。

const onSubmit = (formData) => {
    setLeave(true);   //here I am setting this true
    axios.post("http://localhost:4000/products", formData);
    navigation.push({
        pathname: "/productList",
        state: { added: "pass" },
      });
};

这将在我提交表单时起作用，但是 我想在用户单击后退按钮或任何导航时提示 link。

Answer 1

当您想中断导航时，

when 必须为真。

我会将您的变量重命名为 isDirty，初始化为 false。我发现自从我开始像这样命名我的布尔标志后，我的头脑就需要做一些更少的工作来理解它可能被用来做什么。

第一次更改表单值时将其翻转为 true。可以只是 useEffect 和 formData 作为依赖项吗？检查它是否已经翻转以防止不必要的渲染。

当您从提交中获得 200 时将其翻转回 false 以允许后续导航。

我认为 React 不会 re-render 在当前 onSubmit 中触发提示之前，因此您可能需要在验证提交后找出一种导航方式。

另一个像 didSubmit 这样的标志将允许您使用代码路径来呈现 <Redirect> 而不是调用 navigation.push()，如果合适的话。

但除此之外，使用您当前的设置，可以在您登陆新表单时允许导航（您的用户尚未做出任何努力），如果表单是 'dirty'，导航将被中断，在设置 didSubmit.

后，导航将在下一次渲染时自动发生

const [isDirty, setIsDirty] = React.useState(false)
const [didSubmit, setDidSubmit] = React.useState(false)
const onSubmit = async (formData) => {
  try {
    await axios.post('url', formData)
    setIsDirty(false)
    setDidSubmit(true)
  } catch (error) {
    // handle your errors
  }
}
React.useEffect(() => {
  if(!isDirty) setIsDirty(true)
}, [formData])
React.useEffect(() => {
  if(didSubmit) navigation.push({ ... })
}, [didSubmit]

return (
  // the form...
  <Prompt when={isDirty} {...} />
)

Answer 2

当表单的输入字段发生变化时，我已将状态 isDirty 或 leave 更新为 true，如下所示

render (
<Form onSubmit={handleSubmit(onSubmit)}>
   <Form.Row>
       <Form.Group as={Col} className="mr-5">
       <Form.Label column>Product Name</Form.Label>
       <Form.Control
            name="productName"
            placeholder="Enter product Name"
            required
            onChange={() => setIsDirty(true)} {/* I have updated here*/}
            ref={register}
            />
       </Form.Group>
   </Form.Row>
   <Button variant="success" type="submit" className="text-white mt-5">
            Add New Product
   </Button>
</Form>

<Prompt when={isDirty} message="Are you sure you want to leave ?" /> 
);

现在在 onSubmit 函数中，我在导航到目的地之前将 isDirty 状态更新为 false。

const onSubmit = (formData) => {
    axios.post("http://localhost:4000/products", formData);
    setIsDirty(false);   //here I am setting this true
    navigation.push({
        pathname: "/productList",
        state: { added: "pass" },
      });
};

I'd like to share an important point here that whenever there is a change in input at any point then only isDirty state is true and during submission of the form (all input fields are filled) the state change to false so that it can navigate to another URL.

Answer 3

在 reactjs 的功能组件中，我使用了下面的东西。这对我有用。在我离开当前页面的情况下，我想删除一些商店数据。在那种情况下，我使用了下面的东西。

useEffect(() => {
  return () => {
       // you can add your functionality here  
   };
 }, []);

在输入一些数据后离开页面之前提醒用户（特别是在 ReactJS 中）

Alert user before leaving page after inputting some data (Specially in ReactJS)

reactjs

react-hook-form