Hacktoberfest 2026：維護者為十月標記出來的 issue，仍然開放、適合新手。 瀏覽 Hacktoberfest issue

[Suggestion]: Document that useFormStatus works with a preventDefault-ed onSubmit + startTransition

未關閉 適合新手
  • 哪裡不對？
#8,682 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 3 天內回覆

@Felix-ming 已經在處理了。

開始於 2026年10月6日。

  • #8683 來自 @Felix-ming —— 未關閉

評估

難度
2/5
預估耗時
1-3 小時
新手友好度
78/100
Issue 類型
文件
描述清晰度
描述清楚
活躍度
活躍
技術堆疊
javascript, react
領域
documentation

研究方向

更新 react.dev/reference/react-dom/hooks/useFormStatus 上的 useFormStatus 參考頁面。閱讀 Returns 和 Usage 區段，接著檢查連結的 React PR 和 ReactDOMForm-test.js 中的案例，以確認所述條件。新增待處理狀態的說明，以及一個簡短的 onSubmit/preventDefault()/startTransition 範例；當必需的兩個呼叫和行為都準確記載後，即為完成。

由索引模型根據 Issue 內容生成。

描述

type: documentation
Summary

Document that useFormStatus also reports pending: true when a submit event handler calls event.preventDefault() and starts a Transition with startTransition, not only when the form uses the action prop.

Page

https://react.dev/reference/react-dom/hooks/useFormStatus

Details

I'm implementing a custom <Form> component that accepts a Transition-based prop like submitAction (it validates and transforms the values, then calls submitAction inside startTransition). I wanted to provide the form's pending state through useFormStatus itself, instead of adding a custom context. While investigating, I found that this already works, but because it is not documented, I could not tell whether it is safe to rely on.

The useFormStatus page currently describes the status only in terms of the action prop on the parent <form>. However, since https://github.com/facebook/react/pull/29019 (shipped in React 19.0.0), useFormStatus is also activated when startTransition is called inside a submit event handler that is preventDefault-ed:

After this change, useFormStatus will also be activated if you call startTransition(actionFn) inside a submit event handler that is preventDefault-ed.

The PR describes this as the way for UI component libraries to implement a custom action prop with onSubmit, and the behavior is covered by tests in ReactDOMForm-test.js:

This matters for form components like mine that cannot use the action prop, for example because they validate and transform values before calling the action, or because they do not want the automatic form reset.

I confirmed the behavior with React 19.3.0 in Chrome.

Playground: https://codesandbox.io/p/sandbox/custom-useformstatus-fm2fkl

// App.js
import { startTransition, useActionState } from "react";
import { useFormStatus } from "react-dom";

// A fake request that takes 2 seconds.
function save(value) {
  return new Promise((resolve) => setTimeout(() => resolve(value), 2000));
}

// A form component in a UI library. It does not use the `action` prop,
// e.g. because it validates and transforms the values before calling the action.
function MyForm({ submitAction, children }) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const value = new FormData(event.currentTarget).get("name");
        startTransition(async () => {
          await submitAction(value);
        });
      }}
    >
      {children}
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Sending" : "Send"}
    </button>
  );
}

function App() {
  const [state, sendAction] = useActionState(async (prev, value) => {
    await save(value);
    return value;
  }, null);
  return (
    <MyForm submitAction={sendAction}>
      <input name="name" />
      <SubmitButton />
      {state && <p>Saved: {state}</p>}
    </MyForm>
  );
}

export default App;

pending stays true until the action finishes, and the form is not reset.

Suggested changes:

  • In "Returns", say that pending is also true while a Transition started from a preventDefault-ed submit event of the parent <form> is pending.
  • In "Usage", add a short example of the onSubmit + preventDefault() + startTransition pattern, and note that both preventDefault() and startTransition in the same event are required.
主要語言
JavaScript
星號
11.8k
分支
8k
平均合併
3 天 5 小時
30 天內合併 PR
9

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

reactjs/react.dev 的其他 Issue

查看 reactjs/react.dev 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。