Skip to content

Commit

Permalink
Merge pull request #119 from tli4/tianyi
Browse files Browse the repository at this point in the history
docs(cn): translate content/docs/uncontrolled-components.md into Chinese
  • Loading branch information
LeoEatle authored Mar 27, 2019
2 parents 80a04f7 + 04a8c50 commit 2ab3713
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions content/docs/uncontrolled-components.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: uncontrolled-components
title: Uncontrolled Components
title: 非受控组件
permalink: docs/uncontrolled-components.html
---

In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
在大多数情况下,我们推荐使用 [受控组件](/docs/forms.html) 来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。

To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
要编写一个非受控组件,而不是为每个状态更新都编写数据处理函数,你可以 [使用 ref](/docs/refs-and-the-dom.html) 来从 DOM 节点中获取表单数据。

For example, this code accepts a single name in an uncontrolled component:
例如,下面的代码使用非受控组件接受一个表单的值:

```javascript{5,9,18}
class NameForm extends React.Component {
Expand Down Expand Up @@ -37,15 +37,15 @@ class NameForm extends React.Component {
}
```

[**Try it on CodePen**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
[**CodePen 上尝试**](https://codepen.io/gaearon/pen/WooRWa?editors=0010)

Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
因为非受控组件将真实数据储存在 DOM 节点中,所以再使用非受控组件时,有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少你的代码量。否则,你应该使用受控组件。

If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
如果你还是不清楚在某个特殊场景中应该使用哪种组件,那么 [这篇关于受控和非受控输入组件的文章](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) 会很有帮助。

### Default Values {#default-values}
### 默认值 {#default-values}

In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
React 渲染生命周期时,表单元素上的 `value` 将会覆盖 DOM 节点中的值,在非受控组件中,你经常希望 React 能赋予组件一个初始值,但是不去控制后续的更新。 在这种情况下, 你可以指定一个 `defaultValue` 属性,而不是 `value`

```javascript{7}
render() {
Expand All @@ -64,21 +64,21 @@ render() {
}
```

Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
同样,`<input type="checkbox">` `<input type="radio">` 支持 `defaultChecked``<select>` `<textarea>` 支持 `defaultValue`

## The file input Tag {#the-file-input-tag}
## 文件输入 {#the-file-input-tag}

In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
HTML 中,`<input type="file">` 可以让用户选择一个或多个文件上传到服务器,或者通过使用 [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) 进行操作。

```html
<input type="file" />
```

In React, an `<input type="file" />` is always an uncontrolled component because its value can only be set by a user, and not programmatically.
React 中,`<input type="file" />` 始终是一个非受控组件,因为它的值只能由用户设置,而不能通过代码控制。

You should use the File API to interact with the files. The following example shows how to create a [ref to the DOM node](/docs/refs-and-the-dom.html) to access file(s) in a submit handler:
您应该使用 File API 与文件进行交互。下面的例子显示了如何创建一个 [DOM 节点的 ref](/docs/refs-and-the-dom.html) 从而在提交表单时获取文件的信息。

`embed:uncontrolled-components/input-type-file.js`

[](codepen://uncontrolled-components/input-type-file)
[**在 CodePen 上尝试**](codepen://uncontrolled-components/input-type-file)

0 comments on commit 2ab3713

Please sign in to comment.