unstable_usePrompt

概要

围绕 `useBlocker` 的包装器，用于向用户显示 `window.confirm` 提示，而不是使用 `useBlocker` 构建自定义 UI。

`unstable_` 标志不会被移除，因为这种技术存在许多不足之处，并且在用户点击额外的前进/后退导航时，如果在确认窗口打开的情况下，在不同浏览器中的行为会非常不同（有时甚至不正确）。请自行承担使用风险。

function ImportantForm() {
  let [value, setValue] = React.useState("");

  // Block navigating elsewhere when data has been entered into the input
  unstable_usePrompt({
    message: "Are you sure?",
    when: ({ currentLocation, nextLocation }) =>
      value !== "" &&
      currentLocation.pathname !== nextLocation.pathname,
  });

  return (
    <Form method="post">
      <label>
        Enter some important data:
        <input
          name="data"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <button type="submit">Save</button>
    </Form>
  );
}

签名

unstable_usePrompt(options): void

参数

选项

无文档