如何使用 Prompt 在 formik 脏状态下停止导航

Question

我正在一个reactjs项目中使用formik，我想在用户离开并丢失对其提交所做的更改之前使用Promptfromreact-router打开通知。

我期望这样的事情能够发挥作用：

<Prompt
    when={formik.dirty}
    message="You have unsaved changes. Are you sure you want to leave?"
/>

我的formik块看起来像这样：

const formik = useFormik({
    initialValues: {
        <values>
    },
    enableReinitialize: true,
    validate,
    onSubmit: values => {
        <submit functional stuff>
    }
}); 

我的形式是这样的：

<form id="myForm" onSubmit={formik.handleSubmit}>
    <div className="row">
        <div className="form-group">
            <label htmlFor="name">Name</label>
            <input
                id="name"
                type="text"
                onChange={formik.handleChange}
                value={formik.values.name}
                className="form-control"
                placeholder="Enter name"
                disabled={isDisabled}
            />
            {formik.errors.name ? <div className="text-danger">{formik.errors.name}</div> : null}
        </div>
        <div className="form-group">
            <label htmlFor="subject">Subject</label>
            <input
                id="subject"
                type="text"
                onChange={formik.handleChange}
                value={formik.values.subject}
                className="form-control"
                placeholder="Email subject"
                disabled={isDisabled}
            />
            {formik.errors.subject ? <div className="text-danger">{formik.errors.subject}</div> : null}
        </div>
    </div>
</form>

但似乎formik.dirty未定义或不被视为真实（尽管对表单进行了更改）。

我将如何正确使用dirty道具来触发Prompt？

Answer 1

我不确定你有什么样的设置，但我创建了一个带有路由的 PoC，其中有两个用于导航的选项卡（链接），并且我prompt在带有表单组件的选项卡上使用formik。

import React from "react";
import { Prompt } from "react-router-dom";
import { useFormik } from "formik";

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      name: "",
      subject: ""
    },
    enableReinitialize: true,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    onChange: (e) => {
      console.log(e);
    }
  });

  return (
    <div>
      <Prompt
        when={!!formik.dirty}
        message={(location) =>
          `Are you sure you want to go to ${location.pathname}`
        }
      />
      <form id="myForm" onSubmit={formik.handleSubmit}>
        <div className="row">
          <div className="form-group">
            <label htmlFor="name">Name</label>
            <input
              id="name"
              type="text"
              onChange={formik.handleChange}
              value={formik.values.name}
              className="form-control"
              placeholder="Enter name"
            />
            {formik.errors.name ? (
              <div className="text-danger">{formik.errors.name}</div>
            ) : null}
          </div>
          <div className="form-group">
            <label htmlFor="subject">Subject</label>
            <input
              id="subject"
              type="text"
              onChange={formik.handleChange}
              value={formik.values.subject}
              className="form-control"
              placeholder="Email subject"
            />
            {formik.errors.subject ? (
              <div className="text-danger">{formik.errors.subject}</div>
            ) : null}
          </div>
          {formik.dirty && <button tye="submit">Save</button>}
        </div>
      </form>
    </div>
  );
};

export default MyForm;

看看这个codesandbox。