如何在antd表单中添加Window:beforeunload事件

Question

嗨，我们如何添加 Window: beforeunload 事件到 antd 表单？对于单个字段，我们可以实现如下 https://codesandbox.io/s/cool-brattain-uufyg?file=/src/App.js:452-558

Answer 1

Antd 表单实例有一个 getFieldsValue 方法 (https://ant.design/components/form/#FormInstance)。

您可以通过调用 form.getFieldsValue(true) 获取所有值并检查是否有任何字段被填充。

Answer 2

您可以使用方法onFieldsChange了解什么时候阻止导航：

import React, { useEffect } from "react";
import { Form, Input, Button } from "antd";

const { Item } = Form;

const App = () => {
  const [cannotLeave, setCannotLeave] = React.useState(false);

  useEffect(() => {
    const handler = (e) => {
      e.preventDefault();
      if (!cannotLeave) {
        return;
      }
      e.returnValue = true;
    };

    window.addEventListener("beforeunload", handler);
    return () => window.removeEventListener("beforeunload", handler);
  }, [cannotLeave]);

  const handleFieldsChange = () => setCannotLeave(true);

  return (
    <Form onFieldsChange={handleFieldsChange}>
      <Item name="test">
        <Input placeholder="Test " />
      </Item>
      <Item name="test">
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Item>
    </Form>
  );
};

export default App;

实例：

如何在antd表单中添加Window:beforeunload事件

How to add Window: beforeunload event to antd form

onbeforeunload

reactjs

antd

unload