doc(cn) - translate form

content/docs/forms.md

@@ -8,7 +8,8 @@ redirect_from:
   - "tips/controlled-input-null-value.html"
   - "docs/forms-zh-CN.html"
 ---
-在React里，HTML表格元素的工作方式和其他的DOM元素有些不同，这是因为表格元素通常会保持一些内部的状态。例如这个纯HTML表格只接受一个名称：
+
+在React里，HTML表单元素的工作方式和其他的DOM元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯HTML表单只接受一个名称：
 
 ```html
 <form>
@@ -20,15 +21,15 @@ redirect_from:
 </form>
 ```
 
-此表格具有默认的HTML表格行为，即用户提交表格后浏览到新页面。在React中，如果你只需要这种行为，你不用任何修改。但是，在大多数情况下，拥有一个处理表单提交的javascript函数和对用户输入的数据的访问是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
+此表单具有默认的HTML表单行为，即用户提交表单后浏览到新页面。在React中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的javascript函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
 
 ## 受控组件 {#controlled-components}
 
-在HTML中，表格元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的状态，并根据用户输入进行更新。在React中，可变状态通常保存在组件的state属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.
+在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的state，并根据用户输入进行更新。在React中，可变状态通常保存在组件的state属性中，并且只用 [`setState()`](/docs/react-component.html#setstate)来更新.
 
-我们可以把两者结合起来，使React state 成为“事实的维一来源”。并且控制表格渲染的React组件还控制在随后的用户输入对表格的影响。这种输入值由React以这种方式控制的表格元素称为“受控组件”。
+我们可以把两者结合起来，使React state 成为“事实的维一来源”。这样控制表单渲染的React组件还控制在随后的用户输入对表单的影响。这种输入值由React以这种方式控制着表单元素称为“受控组件”。
 
-例如，如果我们想让前一个示例在提交时记录名称，我们可以将表格作为受控组件写入：
+例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -65,7 +66,7 @@ class NameForm extends React.Component {
 
 [**在CodePen试一试**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-由于在表格元素上设置了`value`属性，因此显示的值将始终为`this.state.value`，这使React state成为事实的来源。由于`handlechange`在每次按键时都会运行以更新React state，因此显示的值将随着用户输入而更新。
+由于在表单元素上设置了`value`属性，因此显示的值将始终为`this.state.value`，这使React state成为事实的来源。由于`handlechange`在每次按键时都会运行以更新React state，因此显示的值将随着用户输入而更新。
 
 对于受控组件，每个状态突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将`handlechange`写为：
 
@@ -84,7 +85,7 @@ handleChange(event) {
   Hello there, this is some text in a text area
 </textarea>
 ```
-在React中，`<textarea>`用“value”属性。这样，使用`<textarea>`的表格可以和使用单行input的表格非常类似：
+在React中，`<textarea>`用`value`属性。这样，使用`<textarea>`的表单可以和使用单行input的表单非常类似：
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -178,29 +179,29 @@ class FlavorForm extends React.Component {
 
 [**在CodePen试一试**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-总的来说，这使得`<input type=“text”>`、`<textarea>`和`<select>`所有的工作都非常相似-它们都接受一个`value`属性，您可以使用它来实现一个受控制的组件。
+总的来说，这使得`<input type=“text”>`,`<textarea>`和`<select>`所有的标签工作都非常相似-它们都接受一个`value`属性，您可以使用它来实现一个受控制的组件。
 
 > 注意
 >
-> 可以将数组传递到“value”属性中，允许您在“select”标签中选择多个选项：
+> 可以将数组传递到`value`属性中，允许您在`select`标签中选择多个选项：
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
 
 ## 文件 input 标签 {#the-file-input-tag}
 
-在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”>`允许用户从设备存储中选择一个或多个文件上载到服务器或通过[File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications)来控制。
 
 ```html
 <input type="file" />
 ```
 
-因为它的值是只读的，所以它是React中的一个**不受控制的**组件。将与其他不受控制的部件一起讨论。[在以后的文档中](/docs/uncontrolled-components.html#the-file-input-tag).
+因为它的值是只读的，所以它是React中的一个**不受控制的**组件。将与其他不受控制的部件[在以后的文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。
 
 ## 处理多个输入 {#handling-multiple-inputs}
 
-当需要处理多个“input”元素时，我们可以给每个元素添加`name`属性，并让处理函数根据`event.target.name`的值选择要执行的操作。
+当需要处理多个`input`元素时，我们可以给每个元素添加`name`属性，并让处理函数根据`event.target.name`的值选择要执行的操作。
 
 例如：
 
@@ -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键：
 
 例如：
 
@@ -276,7 +277,7 @@ this.setState(partialState);
 
 ## 受控输入空值 {#controlled-input-null-value}
 
-如果您愿意，在[受控元素](/docs/forms.html#controlled-components)上指定 value prop可防止用户更改输入. 如果指定了`value`，但输入仍可编辑，则可能意外地将`value`设置为`undefined`或`null`
+如果您愿意，在[受控元素](/docs/forms.html#controlled-components)上指定 value prop可防止用户更改输入。如果指定了`value`，但输入仍可编辑，则可能是意外地将`value`设置为`undefined`或`null`。
 
 下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）
 
@@ -291,7 +292,7 @@ setTimeout(function() {
 
 ## 受控组件的替代品 {#alternatives-to-controlled-components}
 
-有时使用受控制的组件会很麻烦，因为您需要为数据可以更改的每种方式编写一个事件处理程序，并通过一个React组件传递所有的输入状态。当您将先前存在的代码库转换为React或将React应用程序与非React库集成时，这可能会变得特别烦人。在这些情况下，您可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表格的另一种技术。
+有时使用受控制的组件会很麻烦，因为您需要为数据可以更改的每种方式编写一个事件处理程序，并通过一个React组件传递所有的输入状态。当您将先前存在的代码库转换为React或将React应用程序与非React库集成时，这可能会变得特别烦人。在这些情况下，您可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种技术。
 
 ## 成熟的解决方案 {#fully-fledged-solutions}