Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(cn): translate reference/react-dom/useFormStatus into Chinese #1348

Merged
merged 8 commits into from
Oct 20, 2023
86 changes: 43 additions & 43 deletions src/content/reference/react-dom/hooks/useFormStatus.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ canary: true

<Canary>

The `useFormStatus` Hook is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
`useFormStatus` Hook 目前仅在 React canary experimental 渠道中可用。在此处了解更多关于 [React 发布渠道](/community/versioning-policy#all-release-channels) 的信息。

</Canary>

<Intro>

`useFormStatus` is a Hook that gives you status information of the last form submission.
`useFormStatus` 是一个用于提供上次表单提交的状态信息的 Hook
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

```js
const { pending, data, method, action } = useFormStatus();
Expand All @@ -23,19 +23,19 @@ const { pending, data, method, action } = useFormStatus();

---

## Reference {/*reference*/}
## 参考 {/*reference*/}

### `useFormStatus()` {/*use-form-status*/}

The `useFormStatus` Hook provides status information of the last form submission.
`useFormStatus` Hook 提供了上次表单提交的状态信息。

```js {5},[[1, 6, "status.pending"]]
import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
const status = useFormStatus();
return <button disabled={status.pending}>Submit</button>
return <button disabled={status.pending}>提交</button>
}

export default App() {
Expand All @@ -47,42 +47,42 @@ export default App() {
}
```

To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting.
`Submit` 组件必须在 `<form>` 内部渲染以获取状态信息。该 Hook 返回诸如 <CodeStep step={1}>`pending`</CodeStep> 属性的信息,用于指示表单是否正在提交中。

In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting.
在上面的示例中,`Submit` 利用此信息来在表单提交时禁用 `<button>` 按钮的按压操作。

[See more examples below.](#usage)
[参见下方更多示例](#usage)

#### Parameters {/*parameters*/}
#### 参数 {/*parameters*/}

`useFormStatus` does not take any parameters.
`useFormStatus` 不接收任何参数。

#### Returns {/*returns*/}
#### 返回值 {/*returns*/}

A `status` object with the following properties:
`useFormStatus` 返回一个包含以下属性的 `status` 对象:

* `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`.
* `pending`:布尔值。如果为 `true`,则表示父级 `<form>` 正在等待提交;否则为 `false`

* `data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>` is submitting. If there is no active submission or no parent `<form>`, it will be `null`.
* `data`:实现了 [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) 的对象,包含父级 `<form>` 正在提交的数据;如果没有活动提交或没有父级 `<form>`,它将为 `null`
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

* `method`: A string value of either `'get'` or `'post'`. This represents whether the parent `<form>` is submitting with either a `GET` or `POST` [HTTP method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). By default, a `<form>` will use the `GET` method and can be specified by the [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) property.
* `method`:字符串,可以是 `'get'` `'post'`。表示父级 `<form>` 使用 `GET` `POST` [HTTP 方法](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) 进行提交。默认情况下,`<form>` 将使用 `GET` 方法,并可以通过 [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method) 属性指定。

[//]: # (Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
* `action`: A reference to the function passed to the `action` prop on the parent `<form>`. If there is no parent `<form>`, the property is `null`. If there is a URI value provided to the `action` prop, or no `action` prop specified, `status.action` will be `null`.
[//]: # (链接到 `<form>` 文档。"在 `<form>` 上的 `action` 属性上阅读更多信息。")
* `action`:引用传递给父级 `<form>` 的 `action` 属性的函数。如果没有父级 `<form>`,则该属性为 `null`。如果在 `action` 属性上提供了 URI 值,或者未指定 `action` 属性,`status.action` 将为 `null`
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

#### Caveats {/*caveats*/}
#### 注意 {/*caveats*/}

* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`.
* `useFormStatus` will only return status information for a parent `<form>`. It will not return status information for any `<form>` rendered in that same component or children components.
* `useFormStatus` Hook 必须从在 `<form>` 内渲染的组件中调用。
* `useFormStatus` 仅会返回父级 `<form>` 的状态信息。它不会返回同一组件或子组件中渲染的任何 `<form>` 的状态信息。

---

## Usage {/*usage*/}
## 用法 {/*usage*/}

### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
### 在表单提交期间显示待定状态 {/*display-a-pending-state-during-form-submission*/}
可以在一个在 `<form>` 中渲染的组件中调用 `useFormStatus` Hook,并读取返回的 `pending` 属性,以在表单提交期间显示待定状态。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

Here, we use the `pending` property to indicate the form is submitting.
下面的示例使用 `pending` 属性指示表单正在提交。

<Sandpack>

Expand All @@ -94,7 +94,7 @@ function Submit() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? "Submitting..." : "Submit"}
{pending ? "提交中……" : "提交"}
</button>
);
}
Expand Down Expand Up @@ -133,30 +133,30 @@ export async function submitForm(query) {

<Pitfall>

##### `useFormStatus` will not return status information for a `<form>` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}
##### `useFormStatus` 不会返回在同一组件中渲染的 `<form>` 的状态信息 {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}

The `useFormStatus` Hook only returns status information for a parent `<form>` and not for any `<form>` rendered in the same component calling the Hook, or child components.
`useFormStatus` Hook 只会返回父级 `<form>` 的状态信息,而不会返回在调用 Hook 的同一组件中渲染的任何 `<form>` 的状态信息,也不会返回子组件的状态信息。

```js
function Form() {
// 🚩 `pending` will never be true
// useFormStatus does not track the form rendered in this component
// 🚩 `pending` 永远不会为 true
// useFormStatus 不会跟踪在此组件中渲染的表单
const { pending } = useFormStatus();
return <form action={submit}></form>;
}
```

Instead call `useFormStatus` from inside a component that is located inside `<form>`.
而应该从位于 `<form>` 内部的组件中调用 `useFormStatus`。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

```js
function Submit() {
// ✅ `pending` will be derived from the form that wraps the Submit component
// ✅ `pending` 将从包裹 Submit 组件的表单派生
const { pending } = useFormStatus();
return <button disabled={pending}>...</button>;
}

function Form() {
// This is the <form> `useFormStatus` tracks
// <form> `useFormStatus` 将会追踪它
return (
<form action={submit}>
<Submit />
Expand All @@ -167,11 +167,11 @@ function Form() {

</Pitfall>

### Read the form data being submitted {/*read-form-data-being-submitted*/}
### 查看正在提交的表单数据 {/*read-form-data-being-submitted*/}

You can use the `data` property of the status information returned from `useFormStatus` to display what data is being submitted by the user.
可以使用从 `useFormStatus` 返回的状态信息中的 `data` 属性来显示用户正在提交的数据是什么。

Here, we have a form where users can request a username. We can use `useFormStatus` to display a temporary status message confirming what username they have requested.
下面的示例中有一个表单,用户可以请求一个用户名。那么可以使用 `useFormStatus` 来显示一个临时状态消息,确认请求了什么用户名。

<Sandpack>

Expand Down Expand Up @@ -203,13 +203,13 @@ export default function UsernameForm() {

return (
<>
<label>Request a Username: </label><br />
<label>请求用户名:</label><br />
<input type="text" name="username" />
<button type="submit" disabled={pending}>
{pending ? 'Submitting...' : 'Submit'}
{pending ? '提交中……' : '提交'}
</button>
{showSubmitted ? (
<p>Submitted request for username: {submittedUsername.current}</p>
<p>提交请求用户名:{submittedUsername.current}</p>
) : null}
</>
);
Expand Down Expand Up @@ -250,12 +250,12 @@ export async function submitForm(query) {

---

## Troubleshooting {/*troubleshooting*/}
## 疑难解答 {/*troubleshooting*/}

### `status.pending` is never `true` {/*pending-is-never-true*/}
### `status.pending` 从不为 `true` {/*pending-is-never-true*/}

`useFormStatus` will only return status information for a parent `<form>`.
`useFormStatus` 仅会返回父级 `<form>` 的状态信息。

If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element.
如果调用 `useFormStatus` 的组件未嵌套在 `<form>` 中,`status.pending` 总是返回 `false`。请验证 `useFormStatus` 是否在一个 `<form>` 元素的子组件中调用。
Yucohny marked this conversation as resolved.
Show resolved Hide resolved

`useFormStatus` will not track the status of a `<form>` rendered in the same component. See [Pitfall](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) for more details.
`useFormStatus` 不会追踪同一组件中渲染的 `<form>` 的状态。参阅 [陷阱](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) 以了解更多详细信息。
Loading