doc(cn) - translate form #95

zhangxd6 · 2019-02-13T02:59:07Z

No description provided.

netlify · 2019-02-13T03:01:46Z

Deploy preview for cn-reactjs ready!

Built with commit 27196c7

https://deploy-preview-95--cn-reactjs.netlify.com

Ryanhui · 2019-02-14T13:31:26Z

content/docs/forms.md

@@ -254,7 +255,7 @@ class Reservation extends React.Component {

 [**在CodePen试一试**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)

-请注意，我们如何使用ES6[计算属性名称](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names)语法更新与给定输入名称对应的state键：
+请注意，我们是如何使用ES6[计算属性名称](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names)语法更新与给定输入名称对应的state键：


“语法更新与给定输入名称对应的state键”

中英文之间应该有空格（React，state等词）

content/docs/forms.md

netlify · 2019-03-03T03:12:08Z

Deploy preview for zh-hans-reactjs ready!

Built with commit 27196c7

https://deploy-preview-95--zh-hans-reactjs.netlify.com

jothy1023 · 2019-03-03T14:34:16Z

content/docs/forms.md

@@ -21,15 +21,15 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 </form>
 ```

-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
+此表单具有默认的 HTML 表单行为，即用户提交表单后浏览到新页面。在 React 中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的 javascript 函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。


此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。如果你想在 React 中实现这种行为，你无需做任何修改。但大多数情况下，使用 JavaScript 函数来处理表单提交、访问用户填写的表单数据会更方便。而比较标准的实现方法是使用一种称为“受控组件”的技术。

👍点赞「你无需做任何修改」翻译；

JavaScript 大小写要规范哈；

长句尽量改为更易理解的多个短句；

jothy1023 · 2019-03-03T14:39:35Z

content/docs/forms.md


-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
+在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的 state，并根据用户输入进行更新。在 React 中，可变状态通常保存在组件的 state 属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.


在 HTML 中，表单元素（如 <input>、<textarea> 和 <select>）通常会维护自己的 state, 并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state 属性中，并且只通过 setState() 进行更新。

中英文之间加空格哈，文中其它部分麻烦同步改正；

maintain 这里感觉翻译成「维护」更好哈；

一般我们说「通过 setState() 更新 state」；

jothy1023 · 2019-03-03T14:52:53Z

content/docs/forms.md


-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
+我们可以把两者结合起来，使 React state 成为“事实的维一来源”。这样控制表单渲染的 React 组件还控制在随后的用户输入对表单的影响。这种输入值由 React 以这种方式控制着表单元素称为“受控组件”。


我们可以通过把 React state 作为“事实的唯一来源”，来将二者合并起来。这样渲染表单的 React 组件同时也控制了用户后续输入对表单造成的影响。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

第一句的手段和结果似乎反了；

在保持原意的前提下，尽量使语句通顺一些；

jothy1023 · 2019-03-03T15:13:49Z

content/docs/forms.md


-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
+例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：


例如，如果我们想让前一个示例在提交时打印出名称，我们可以将表单写为受控组件：

从下文 handleSubmit 方法可看出是把名称 alert 了出来，所以不妨翻译为「打印」；

jothy1023 · 2019-03-03T15:19:05Z

content/docs/forms.md


 ```html
 <textarea>
  Hello there, this is some text in a text area
 </textarea>
 ```
-
-In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
+在 React 中，`<textarea>` 用 `value` 属性。这样，使用 `<textarea>` 的表单可以和使用单行input的表单非常类似：


而在 React 中，<textarea> 使用的是 value 属性。这样，使用 <textarea> 的表单可以和使用单行 input 的表单非常相似：

可以适当使用连词及补充，使上下文更加连贯；

jothy1023 · 2019-03-03T16:44:46Z

content/docs/forms.md

 >
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> 可以将数组传递到 `value` 属性中，允许您在 `select` 标签中选择多个选项：


你可以将数组传递到 value 属性中，以支持在 select 标签中选择多个选项：

尽量贴近中文表达习惯吧；

jothy1023 · 2019-03-03T16:48:49Z

content/docs/forms.md


-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”> 允许用户从设备存储中选择一个或多个文件，将其上传到服务器，或使用 JavaScript 的 File API 进行控制。

jothy1023 · 2019-03-03T16:55:05Z

content/docs/forms.md

-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**在CodePen试一试**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+
+请注意，我们是如何使用 ES6 [计算属性名称](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names)语法更新与给定输入名称对应的 state 键：


请注意，我们是如何使用 ES6 的计算属性名称语法使 state 的键名随着给定的输入名更新：

jothy1023 · 2019-03-03T17:04:48Z

content/docs/forms.md


-Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
+如果您愿意，在[受控元素](/docs/forms.html#controlled-components)上指定 value prop 可防止用户更改输入。如果指定了 `value`，但输入仍可编辑，则可能是意外地将`value` 设置为  `undefined`或 `null`。


在受控元素上指定 value 属性可防止用户更输入，除非你想这么做。如果你已经指定了 value，但输入仍可编辑，那你可能不小心将 value 设置为 undefined 或 null 了。

QC-L

翻译时，请不要直接把翻译工具的内容照搬过来，很多规范需要注意。
如不要使用您，中文排版规范等。

QC-L · 2019-03-03T11:39:08Z

content/docs/forms.md

@@ -9,7 +9,7 @@ redirect_from:
  - "docs/forms-zh-CN.html"
 ---

-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
+在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯 HTML 表单只接受一个名称：


Suggested change

在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯 HTML 表单只接受一个名称：

在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会持有一些内部的状态。例如这个纯 HTML 表单只接受一个名称：

QC-L · 2019-03-03T12:19:28Z

content/docs/forms.md

@@ -21,15 +21,15 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 </form>
 ```

-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
+此表单具有默认的 HTML 表单行为，即用户提交表单后浏览到新页面。在 React 中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的 javascript 函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。


Suggested change

此表单具有默认的 HTML 表单行为，即用户提交表单后浏览到新页面。在 React 中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的 javascript 函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。

此表单具有默认的 HTML 表单行为，即用户提交表单后方可浏览新页面。如果你在 React 中执行相同的代码，它依然有效。但在大部分情况下，使用 JavaScript 函数可以很方便的处理表单的提交，同时还可以访问用户输入的表单数据。实现这种效果的标准方式是使用“受控组件”。

QC-L · 2019-03-03T12:23:05Z

content/docs/forms.md


-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
+在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的 state，并根据用户输入进行更新。在 React 中，可变状态通常保存在组件的 state 属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.


Suggested change

在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的 state，并根据用户输入进行更新。在 React 中，可变状态通常保存在组件的 state 属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.

在 HTML 中，诸如 `<input>`、 `<textarea>` 和 `<select>` 之类的表单元素通常自己维护 state，并根据用户输入进行更新。在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 [`setState()`](/docs/react-component.html#setstate) 来对其进行更新.

QC-L · 2019-03-04T01:40:28Z

content/docs/forms.md


-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
+我们可以把两者结合起来，使 React state 成为“事实的维一来源”。这样控制表单渲染的 React 组件还控制在随后的用户输入对表单的影响。这种输入值由 React 以这种方式控制着表单元素称为“受控组件”。


Suggested change

我们可以把两者结合起来，使 React state 成为“事实的维一来源”。这样控制表单渲染的 React 组件还控制在随后的用户输入对表单的影响。这种输入值由 React 以这种方式控制着表单元素称为“受控组件”。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。值由 React 以这种形式控制着的表单元素称为“受控组件”。

@hijiangtao 看下这句

QC-L · 2019-03-04T01:42:59Z

content/docs/forms.md


-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
+例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：


Suggested change

例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：

例如，如果想让上一个示例在提交时记录名称，我们可以将表单作为受控组件编写：

QC-L · 2019-03-04T02:57:12Z

content/docs/forms.md


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

-Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
+因为它的值是只读的，所以它是 React 中的一个**不受控制的**组件。将与其他不受控制的部件[在以后的文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。


Suggested change

因为它的值是只读的，所以它是 React 中的一个**不受控制的**组件。将与其他不受控制的部件[在以后的文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。

由于它的 value 只读，所以它是 React 中的一个**非受控**组件。将与其他非受控组件[在后续文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。

QC-L · 2019-03-04T02:58:51Z

content/docs/forms.md

@@ -254,31 +253,33 @@ class Reservation extends React.Component {
 }
 ```

-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**在CodePen试一试**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)


QC-L · 2019-03-04T03:15:47Z

content/docs/forms.md


 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```

-Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
+另外，由于 `setState()` 自动[将部分状态合并到当前状态](/docs/state-and-lifecycle.html#state-updates-are-merged), 我们只需要用更改的部分来调用它。


Suggested change

另外，由于 `setState()` 自动[将部分状态合并到当前状态](/docs/state-and-lifecycle.html#state-updates-are-merged), 我们只需要用更改的部分来调用它。

另外，由于 `setState()` 自动[将部分 state 合并到当前 state](/docs/state-and-lifecycle.html#state-updates-are-merged)，只需调用它更改部分 state 即可。

QC-L · 2019-03-04T03:27:01Z

content/docs/forms.md


-It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
+有时使用受控制的组件会很麻烦，因为您需要为数据可以更改的每种方式编写一个事件处理程序，并通过一个 React 组件传递所有的输入状态。当您将先前存在的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会变得特别烦人。在这些情况下，您可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种技术。


Suggested change

有时使用受控制的组件会很麻烦，因为您需要为数据可以更改的每种方式编写一个事件处理程序，并通过一个 React 组件传递所有的输入状态。当您将先前存在的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会变得特别烦人。在这些情况下，您可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种技术。

有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式都编写事件处理函数，并通过 React 组件传递所有的输入 state。当你将之前的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会令人厌烦。在这些情况下，你可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种方式。

QC-L · 2019-03-04T03:33:14Z

content/docs/forms.md


-If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
+如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik) 是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。


Suggested change

如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik) 是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。

如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 [Formik](https://jaredpalmer.com/formik) 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上——所以不要忽视学习它们。

QC-L · 2019-03-04T11:26:16Z

content/docs/forms.md

@@ -137,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```

-请注意，由于 `selected` 属性的缘故，椰子选项最初是被选中的。React 不使用此 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更方便，因为您只需要在一个地方更新它。例如：
+请注意，由于 `selected` 属性的缘故，Coconut 选项选项默认被选中。React 并不会使用 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：


多了一个选项

QC-L · 2019-03-06T03:42:26Z

@zhangxd6 将「状态 -> state」，按照术语表规范来哈。记得加空格

hijiangtao

L134-L137 代码中内容是否要统一翻译？我记得之前有 PR 针对其中内容是进行翻译的。

hijiangtao · 2019-03-06T13:09:39Z

content/docs/forms.md

@@ -138,7 +138,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 </select>


代码中内容是否要统一翻译？我记得之前有 PR 针对其中内容是进行翻译的。

@zhangxd6 代码块中的英文也翻译一下，辛苦

QC-L · 2019-03-07T02:29:24Z

@zhangxd6 select 里的 options 的 value 值不翻译，包括设置 value 时，往服务器传参都是英文吧？

QC-L

@zhangxd6 Nice Work!

jothy1023 · 2019-03-07T08:57:52Z

content/docs/forms.md


-If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
+如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 [Formik](https://jaredpalmer.com/formik) 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上——所以不要忽视学习它们。


如果你正在寻找一个包含验证、已访问字段追踪以及表单提交处理的完整解决方案，Formik 是个不错的选择。不过，它也是基于受控组件和 state 管理的原理之上构建的——所以不要忽视对它们的学习。

英文中很多动词的表达，翻译成名词会更符合我们的表达习惯；

zhangxd6 added 2 commits February 11, 2019 20:59

init cn translation

6a549ad

updating

1d720e1

QC-L added the Pending Review 已翻译，待校对阶段 label Feb 13, 2019

QC-L mentioned this pull request Feb 14, 2019

OLD CLAIMS #4

Closed

Ryanhui reviewed Feb 14, 2019

View reviewed changes

hijiangtao mentioned this pull request Feb 15, 2019

[READ ONLY] Translation Check Sheet #98

Closed

update spaces

330271c

QC-L reviewed Feb 27, 2019

View reviewed changes

content/docs/forms.md Show resolved Hide resolved

update title

93fb804

jothy1023 reviewed Mar 3, 2019

View reviewed changes

QC-L requested changes Mar 4, 2019

View reviewed changes

update based on comments

bae8c2e

QC-L reviewed Mar 4, 2019

View reviewed changes

remove extra

7305d37

more update

74cbf31

QC-L previously approved these changes Mar 6, 2019

View reviewed changes

QC-L added Pending Re-Review 已修改，待审校阶段 and removed Pending Review 已翻译，待校对阶段 labels Mar 6, 2019

hijiangtao reviewed Mar 6, 2019

View reviewed changes

zhangxd6 dismissed QC-L’s stale review via 27a1ab7 March 7, 2019 02:16

translate code snippets

27a1ab7

zhangxd6 added 2 commits March 6, 2019 20:41

un-translate

00a22d4

un-translate cont

27196c7

QC-L approved these changes Mar 7, 2019

View reviewed changes

hijiangtao approved these changes Mar 7, 2019

View reviewed changes

hijiangtao merged commit 8ef7e33 into reactjs:master Mar 7, 2019

jothy1023 reviewed Mar 7, 2019

View reviewed changes

OhIAmFine pushed a commit to OhIAmFine/zh-hans.reactjs.org that referenced this pull request May 6, 2019

doc(cn) - translate form (reactjs#95)

c620ad4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doc(cn) - translate form #95

doc(cn) - translate form #95

zhangxd6 commented Feb 13, 2019

netlify bot commented Feb 13, 2019 •

edited

Ryanhui Feb 14, 2019

netlify bot commented Mar 3, 2019 •

edited

jothy1023 Mar 3, 2019

jothy1023 Mar 3, 2019 •

edited

jothy1023 Mar 3, 2019 •

edited

jothy1023 Mar 3, 2019

jothy1023 Mar 3, 2019

jothy1023 Mar 3, 2019

jothy1023 Mar 3, 2019

jothy1023 Mar 3, 2019

jothy1023 Mar 3, 2019 •

edited

QC-L left a comment •

edited

QC-L Mar 3, 2019

QC-L Mar 3, 2019

QC-L Mar 3, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L Mar 4, 2019

QC-L commented Mar 6, 2019 •

edited

hijiangtao left a comment

hijiangtao Mar 6, 2019

QC-L Mar 7, 2019

QC-L commented Mar 7, 2019 •

edited

QC-L left a comment

jothy1023 Mar 7, 2019


		In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
		在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的 state，并根据用户输入进行更新。在 React 中，可变状态通常保存在组件的 state 属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.


		We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
		我们可以把两者结合起来，使 React state 成为“事实的维一来源”。这样控制表单渲染的 React 组件还控制在随后的用户输入对表单的影响。这种输入值由 React 以这种方式控制着表单元素称为“受控组件”。


		For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
		例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：


		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) 来控制。


		Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
		如果您愿意，在[受控元素](/docs/forms.html#controlled-components)上指定 value prop 可防止用户更改输入。如果指定了 `value`，但输入仍可编辑，则可能是意外地将`value` 设置为 `undefined`或 `null`。

	在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯 HTML 表单只接受一个名称：
	在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会持有一些内部的状态。例如这个纯 HTML 表单只接受一个名称：

	此表单具有默认的 HTML 表单行为，即用户提交表单后浏览到新页面。在 React 中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的 javascript 函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
	此表单具有默认的 HTML 表单行为，即用户提交表单后方可浏览新页面。如果你在 React 中执行相同的代码，它依然有效。但在大部分情况下，使用 JavaScript 函数可以很方便的处理表单的提交，同时还可以访问用户输入的表单数据。实现这种效果的标准方式是使用“受控组件”。

	在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的 state，并根据用户输入进行更新。在 React 中，可变状态通常保存在组件的 state 属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.
	在 HTML 中，诸如 `<input>`、 `<textarea>` 和 `<select>` 之类的表单元素通常自己维护 state，并根据用户输入进行更新。在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 [`setState()`](/docs/react-component.html#setstate) 来对其进行更新.

	我们可以把两者结合起来，使 React state 成为“事实的维一来源”。这样控制表单渲染的 React 组件还控制在随后的用户输入对表单的影响。这种输入值由 React 以这种方式控制着表单元素称为“受控组件”。
	我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。值由 React 以这种形式控制着的表单元素称为“受控组件”。

	例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：
	例如，如果想让上一个示例在提交时记录名称，我们可以将表单作为受控组件编写：

	因为它的值是只读的，所以它是 React 中的一个不受控制的组件。将与其他不受控制的部件[在以后的文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。
	由于它的 value 只读，所以它是 React 中的一个非受控组件。将与其他非受控组件[在后续文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。

	另外，由于 `setState()` 自动[将部分状态合并到当前状态](/docs/state-and-lifecycle.html#state-updates-are-merged), 我们只需要用更改的部分来调用它。
	另外，由于 `setState()` 自动[将部分 state 合并到当前 state](/docs/state-and-lifecycle.html#state-updates-are-merged)，只需调用它更改部分 state 即可。


		It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
		有时使用受控制的组件会很麻烦，因为您需要为数据可以更改的每种方式编写一个事件处理程序，并通过一个 React 组件传递所有的输入状态。当您将先前存在的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会变得特别烦人。在这些情况下，您可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种技术。


		If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
		如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik) 是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。

	如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik) 是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。
	如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 [Formik](https://jaredpalmer.com/formik) 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上——所以不要忽视学习它们。

		@@ -138,7 +138,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
		</select>

doc(cn) - translate form #95

doc(cn) - translate form #95

Conversation

zhangxd6 commented Feb 13, 2019

netlify bot commented Feb 13, 2019 • edited

Choose a reason for hiding this comment

netlify bot commented Mar 3, 2019 • edited

Choose a reason for hiding this comment

jothy1023 Mar 3, 2019 • edited

Choose a reason for hiding this comment

jothy1023 Mar 3, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jothy1023 Mar 3, 2019 • edited

Choose a reason for hiding this comment

QC-L left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L commented Mar 6, 2019 • edited

hijiangtao left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QC-L commented Mar 7, 2019 • edited

QC-L left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Feb 13, 2019 •

edited

netlify bot commented Mar 3, 2019 •

edited

jothy1023 Mar 3, 2019 •

edited

jothy1023 Mar 3, 2019 •

edited

jothy1023 Mar 3, 2019 •

edited

QC-L left a comment •

edited

QC-L commented Mar 6, 2019 •

edited

QC-L commented Mar 7, 2019 •

edited