From 6a549ad2b9cec31f95a3c1ece661bfb6c3d9ed5a Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Mon, 11 Feb 2019 20:59:27 -0600
Subject: [PATCH 01/10] init cn translation

---
 content/docs/forms.md | 78 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 1a8b599d55..70a56c814a 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -8,8 +8,7 @@ redirect_from:
   - "tips/controlled-input-null-value.html"
   - "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表格只接受一个名称：
 
 ```html
 <form>
@@ -21,15 +20,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函数和对用户输入的数据的访问是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
 
-## Controlled Components {#controlled-components}
+## 受控组件 {#controlled-components}
 
-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>`）通常保持自己的状态，并根据用户输入进行更新。在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:
+例如，如果我们想让前一个示例在提交时记录名称，我们可以将表格作为受控组件写入：
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,11 +63,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**在CodePen试一试**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
+由于在表格元素上设置了`value`属性，因此显示的值将始终为`this.state.value`，这使React state成为事实的来源。由于`handlechange`在每次按键时都会运行以更新React state，因此显示的值将随着用户输入而更新。
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
+对于受控组件，每个状态突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将`handlechange`写为：
 
 ```javascript{2}
 handleChange(event) {
@@ -76,17 +75,16 @@ handleChange(event) {
 }
 ```
 
-## The textarea Tag {#the-textarea-tag}
+## textarea 标签 {#the-textarea-tag}
 
-In HTML, a `<textarea>` element defines its text by its children:
+在HTML中, `<textarea>`元素通过其子元素定义其文本:
 
 ```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的表格非常类似：
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -123,11 +121,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
+请注意，`this.state.value`是在构造函数中初始化的，因此文本区域开始时是有一些文本的。
 
-## The select Tag {#the-select-tag}
+## select 标签 {#the-select-tag}
 
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
+在HTML中，`<select>`创建下拉列表。例如，此HTML创建一个口味下拉列表：
 
 ```html
 <select>
@@ -138,7 +136,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 </select>
 ```
 
-Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
+请注意，由于`selected`属性的缘故，椰子选项最初是被选中的。React不使用此`selected`属性，而是在根`select`标签上使用`value`属性。这在受控组件中更方便，因为您只需要在一个地方更新它。例如：
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -178,33 +176,33 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**在CodePen试一试**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
+总的来说，这使得`<input type=“text”>`、`<textarea>`和`<select>`所有的工作都非常相似-它们都接受一个`value`属性，您可以使用它来实现一个受控制的组件。
 
-> Note
+> 注意
 >
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> 可以将数组传递到“value”属性中，允许您在“select”标签中选择多个选项：
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
 
-## The file input Tag {#the-file-input-tag}
+## 文件 input 标签 {#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" />
 ```
 
-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).
 
-## Handling Multiple Inputs {#handling-multiple-inputs}
+## 处理多个输入 {#handling-multiple-inputs}
 
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
+当需要处理多个“input”元素时，我们可以给每个元素添加`name`属性，并让处理函数根据`event.target.name`的值选择要执行的操作。
 
-For example:
+例如：
 
 ```javascript{15,18,28,37}
 class Reservation extends React.Component {
@@ -254,9 +252,11 @@ 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)
+
+请注意，我们如何使用ES6[计算属性名称](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names)语法更新与给定输入名称对应的state键：
 
-Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
+例如：
 
 ```js{2}
 this.setState({
@@ -264,7 +264,7 @@ this.setState({
 });
 ```
 
-It is equivalent to this ES5 code:
+等同ES5:
 
 ```js{2}
 var partialState = {};
@@ -272,13 +272,13 @@ 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), 我们只需要用更改的部分来调用它。
 
-## Controlled Input Null Value {#controlled-input-null-value}
+## 受控输入空值 {#controlled-input-null-value}
 
-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`
 
-The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
+下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);
@@ -289,10 +289,10 @@ setTimeout(function() {
 
 ```
 
-## Alternatives to Controlled Components {#alternatives-to-controlled-components}
+## 受控组件的替代品 {#alternatives-to-controlled-components}
 
-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), 这是实现输入表格的另一种技术。
 
-## Fully-Fledged Solutions {#fully-fledged-solutions}
+## 成熟的解决方案 {#fully-fledged-solutions}
 
-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)是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。
\ No newline at end of file

From 1d720e1a5adf77aa0c78603de109f1e675f2b5a9 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Tue, 12 Feb 2019 20:55:21 -0600
Subject: [PATCH 02/10] updating

---
 content/docs/forms.md | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 70a56c814a..d8b56b0115 100644
--- a/content/docs/forms.md
+++ b/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,11 +179,11 @@ 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']}>
@@ -190,17 +191,17 @@ class FlavorForm extends React.Component {
 
 ## 文件 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}
 

From 330271c7ed599f0bb692403a348c5eb78f8389d0 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Mon, 18 Feb 2019 20:59:18 -0600
Subject: [PATCH 03/10] update spaces

---
 content/docs/forms.md | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index d8b56b0115..521c9fddbb 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-在React里，HTML表单元素的工作方式和其他的DOM元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯HTML表单只接受一个名称：
+在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯 HTML 表单只接受一个名称：
 
 ```html
 <form>
@@ -21,13 +21,13 @@ redirect_from:
 </form>
 ```
 
-此表单具有默认的HTML表单行为，即用户提交表单后浏览到新页面。在React中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的javascript函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
+此表单具有默认的 HTML 表单行为，即用户提交表单后浏览到新页面。在 React 中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的 javascript 函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
 
 ## 受控组件 {#controlled-components}
 
-在HTML中，表单元素（如`<input>`、`<textarea>`和`<select>`）通常保持自己的state，并根据用户输入进行更新。在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 以这种方式控制着表单元素称为“受控组件”。
 
 例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：
 
@@ -66,9 +66,9 @@ 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`写为：
+对于受控组件，每个状态突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将 `handlechange` 写为：
 
 ```javascript{2}
 handleChange(event) {
@@ -78,14 +78,14 @@ handleChange(event) {
 
 ## textarea 标签 {#the-textarea-tag}
 
-在HTML中, `<textarea>`元素通过其子元素定义其文本:
+在HTML中, `<textarea>` 元素通过其子元素定义其文本:
 
 ```html
 <textarea>
   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 {
@@ -122,11 +122,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-请注意，`this.state.value`是在构造函数中初始化的，因此文本区域开始时是有一些文本的。
+请注意，`this.state.value` 是在构造函数中初始化的，因此文本区域开始时是有一些文本的。
 
 ## select 标签 {#the-select-tag}
 
-在HTML中，`<select>`创建下拉列表。例如，此HTML创建一个口味下拉列表：
+在 HTML 中，`<select>` 创建下拉列表。例如，此 HTML 创建一个口味下拉列表：
 
 ```html
 <select>
@@ -137,7 +137,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-请注意，由于`selected`属性的缘故，椰子选项最初是被选中的。React不使用此`selected`属性，而是在根`select`标签上使用`value`属性。这在受控组件中更方便，因为您只需要在一个地方更新它。例如：
+请注意，由于 `selected` 属性的缘故，椰子选项最初是被选中的。React 不使用此 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更方便，因为您只需要在一个地方更新它。例如：
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -179,11 +179,11 @@ 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']}>
@@ -191,17 +191,17 @@ class FlavorForm extends React.Component {
 
 ## 文件 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` 的值选择要执行的操作。
 
 例如：
 
@@ -255,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 键：
 
 例如：
 
@@ -265,7 +265,7 @@ this.setState({
 });
 ```
 
-等同ES5:
+等同 ES5:
 
 ```js{2}
 var partialState = {};
@@ -277,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`。
 
 下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）
 
@@ -292,8 +292,8 @@ 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}
 
-如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik)是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。
\ No newline at end of file
+如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik) 是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。
\ No newline at end of file

From 93fb8041ae95a77eaa5b16c5a0481b08e0f4d7d2 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Sat, 2 Mar 2019 21:07:33 -0600
Subject: [PATCH 04/10] update title

---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 521c9fddbb..2dad7181bc 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -1,6 +1,6 @@
 ---
 id: forms
-title: Forms
+title: 表单
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html

From bae8c2ef51e2f378a0e4edd4fcf5b47a91edb588 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Sun, 3 Mar 2019 22:19:55 -0600
Subject: [PATCH 05/10] update based on comments

---
 content/docs/forms.md | 49 ++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 2dad7181bc..77707ad72d 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -21,15 +21,15 @@ redirect_from:
 </form>
 ```
 
-此表单具有默认的 HTML 表单行为，即用户提交表单后浏览到新页面。在 React 中，如果你只需要这种行为，你不用做任何修改。但是，在大多数情况下，拥有一个处理表单提交和对用户输入的数据的访问的 javascript 函数是很方便的。实现这一点的标准方法是使用一种称为“受控组件”的技术。
+此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。如果你在 React 中执行相同的代码，它依然有效。但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。
 
 ## 受控组件 {#controlled-components}
 
-在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 以这种方式控制取值的表单输入元素就叫做“受控组件”。
 
-例如，如果我们想让前一个示例在提交时记录名称，我们可以将表单作为受控组件写入：
+例如，如果我们想让前一个示例在提交时打印出名称，我们可以将表单写为受控组件：
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,11 +64,11 @@ class NameForm extends React.Component {
 }
 ```
 
-[**在CodePen试一试**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**在 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` 写为：
+对于受控组件来说，每个状态突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将 `handlechange` 改写为：
 
 ```javascript{2}
 handleChange(event) {
@@ -78,14 +78,15 @@ handleChange(event) {
 
 ## textarea 标签 {#the-textarea-tag}
 
-在HTML中, `<textarea>` 元素通过其子元素定义其文本:
+在 HTML 中, `<textarea>` 元素通过其子元素定义其文本:
 
 ```html
 <textarea>
-  Hello there, this is some text in a text area
+  你好， 这是在 text area 里的文本
 </textarea>
 ```
-在 React 中，`<textarea>` 用 `value` 属性。这样，使用 `<textarea>` 的表单可以和使用单行input的表单非常类似：
+
+而在 React 中，`<textarea>` 使用 `value` 属性代替。这样，可以使得使用 `<textarea>` 的表单和使用单行 input 的表单非常类似：
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -122,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-请注意，`this.state.value` 是在构造函数中初始化的，因此文本区域开始时是有一些文本的。
+请注意，`this.state.value` 初始化于构造函数中，因此文本区域默认有初值。
 
 ## select 标签 {#the-select-tag}
 
-在 HTML 中，`<select>` 创建下拉列表。例如，此 HTML 创建一个口味下拉列表：
+在 HTML 中，`<select>` 创建下拉列表标签。例如，如下 HTML 创建了水果相关的下拉列表：
 
 ```html
 <select>
@@ -137,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-请注意，由于 `selected` 属性的缘故，椰子选项最初是被选中的。React 不使用此 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更方便，因为您只需要在一个地方更新它。例如：
+请注意，由于 `selected` 属性的缘故，Coconut 选项选项默认被选中。React 并不会使用 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -177,13 +178,13 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**在CodePen试一试**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**在 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']}>
@@ -191,13 +192,13 @@ class FlavorForm extends React.Component {
 
 ## 文件 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”>` 允许用户从存储设备中选择一个或多个文件，将其上传到服务器，或通过使用 JavaScript 的 [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)一起讨论。
+因为它的 value 只读，所以它是 React 中的一个**非受控**组件。将与其他非受控组件[在后续文档中](/docs/uncontrolled-components.html#the-file-input-tag)一起讨论。
 
 ## 处理多个输入 {#handling-multiple-inputs}
 
@@ -253,9 +254,9 @@ class Reservation extends React.Component {
 }
 ```
 
-[**在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 [计算属性名称](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names)的语法更新给定输入名称对应的 state 值：
 
 例如：
 
@@ -273,11 +274,11 @@ partialState[name] = value;
 this.setState(partialState);
 ```
 
-另外，由于 `setState()` 自动[将部分状态合并到当前状态](/docs/state-and-lifecycle.html#state-updates-are-merged), 我们只需要用更改的部分来调用它。
+另外，由于 `setState()` 自动[将部分 state 合并到当前 state](/docs/state-and-lifecycle.html#state-updates-are-merged), 只需调用它更改部分 state 即可。
 
 ## 受控输入空值 {#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`。
 
 下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）
 
@@ -292,8 +293,8 @@ setTimeout(function() {
 
 ## 受控组件的替代品 {#alternatives-to-controlled-components}
 
-有时使用受控制的组件会很麻烦，因为您需要为数据可以更改的每种方式编写一个事件处理程序，并通过一个 React 组件传递所有的输入状态。当您将先前存在的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会变得特别烦人。在这些情况下，您可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种技术。
+有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式都编写事件处理函数，并通过一个 React 组件传递所有的输入 state。当你将之前的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会令人厌烦。在这些情况下，你可能希望使用[非受控组件](/docs/uncontrolled-components.html), 这是实现输入表单的另一种方式。
 
 ## 成熟的解决方案 {#fully-fledged-solutions}
 
-如果您正在寻找一个完整的解决方案，包括验证、跟踪访问的字段和处理表单提交, [Formik](https://jaredpalmer.com/formik) 是一个流行的选择。然而，它建立在受控组件和管理状态的相同原则之上——所以不要忽视学习它们。
\ No newline at end of file
+如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 [Formik](https://jaredpalmer.com/formik) 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上——所以不要忽视学习它们。
\ No newline at end of file

From 7305d37a5d84151d9998b0c98b9dfb5442d44bed Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Tue, 5 Mar 2019 21:04:58 -0600
Subject: [PATCH 06/10] remove extra

---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 77707ad72d..569c07c1e0 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -138,7 +138,7 @@ class EssayForm extends React.Component {
 </select>
 ```
 
-请注意，由于 `selected` 属性的缘故，Coconut 选项选项默认被选中。React 并不会使用 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：
+请注意，由于 `selected` 属性的缘故，Coconut 选项默认被选中。React 并不会使用 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {

From 74cbf310d21fd82384b655e39a0adafa57975003 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Tue, 5 Mar 2019 22:02:46 -0600
Subject: [PATCH 07/10] more update

---
 content/docs/forms.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 569c07c1e0..147db631c5 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的状态。例如这个纯 HTML 表单只接受一个名称：
+在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称：
 
 ```html
 <form>
@@ -68,7 +68,7 @@ class NameForm extends React.Component {
 
 由于在表单元素上设置了 `value` 属性，因此显示的值将始终为 `this.state.value`，这使得 React 的 state 成为唯一数据源。由于 `handlechange` 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。
 
-对于受控组件来说，每个状态突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将 `handlechange` 改写为：
+对于受控组件来说，每个 state 突变都有一个相关的处理函数。这使得修改或验证用户输入变得简单。例如，如果我们要强制要求所有名称都用大写字母书写，我们可以将 `handlechange` 改写为：
 
 ```javascript{2}
 handleChange(event) {

From 27a1ab704ce34e425fed89440af09f159ebe94d1 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Wed, 6 Mar 2019 20:17:14 -0600
Subject: [PATCH 08/10] translate code snippets

---
 content/docs/forms.md | 48 +++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 147db631c5..13855843a4 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -14,10 +14,10 @@ redirect_from:
 ```html
 <form>
   <label>
-    Name:
+    名字:
     <input type="text" name="name" />
   </label>
-  <input type="submit" value="Submit" />
+  <input type="submit" value="提交" />
 </form>
 ```
 
@@ -46,7 +46,7 @@ class NameForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('A name was submitted: ' + this.state.value);
+    alert('提交的名字: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -54,10 +54,10 @@ class NameForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Name:
+          名字:
           <input type="text" value={this.state.value} onChange={this.handleChange} />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="提交" />
       </form>
     );
   }
@@ -93,7 +93,7 @@ class EssayForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: 'Please write an essay about your favorite DOM element.'
+      value: '请撰写一篇关于你喜欢的 DOM 元素的文章.'
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -105,7 +105,7 @@ class EssayForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('An essay was submitted: ' + this.state.value);
+    alert('提交的文章: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -113,10 +113,10 @@ class EssayForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Essay:
+          文章:
           <textarea value={this.state.value} onChange={this.handleChange} />
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="提交" />
       </form>
     );
   }
@@ -131,20 +131,20 @@ class EssayForm extends React.Component {
 
 ```html
 <select>
-  <option value="grapefruit">Grapefruit</option>
-  <option value="lime">Lime</option>
-  <option selected value="coconut">Coconut</option>
-  <option value="mango">Mango</option>
+  <option value="葡萄柚">葡萄柚</option>
+  <option value="柠檬">柠檬</option>
+  <option selected value="椰子">椰子</option>
+  <option value="芒果">芒果</option>
 </select>
 ```
 
-请注意，由于 `selected` 属性的缘故，Coconut 选项默认被选中。React 并不会使用 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：
+请注意，由于 `selected` 属性的缘故，椰子选项默认被选中。React 并不会使用 `selected` 属性，而是在根 `select` 标签上使用 `value` 属性。这在受控组件中更便捷，因为您只需要在根标签中更新它。例如：
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {value: 'coconut'};
+    this.state = {value: '椰子'};
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -155,7 +155,7 @@ class FlavorForm extends React.Component {
   }
 
   handleSubmit(event) {
-    alert('Your favorite flavor is: ' + this.state.value);
+    alert('你喜欢的风味是: ' + this.state.value);
     event.preventDefault();
   }
 
@@ -163,15 +163,15 @@ class FlavorForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label>
-          Pick your favorite flavor:
+          选择你喜欢的风味:
           <select value={this.state.value} onChange={this.handleChange}>
-            <option value="grapefruit">Grapefruit</option>
-            <option value="lime">Lime</option>
-            <option value="coconut">Coconut</option>
-            <option value="mango">Mango</option>
+            <option value="葡萄柚">葡萄柚</option>
+            <option value="柠檬">柠檬</option>
+            <option value="椰子">椰子</option>
+            <option value="芒果">芒果</option>
           </select>
         </label>
-        <input type="submit" value="Submit" />
+        <input type="submit" value="提交" />
       </form>
     );
   }
@@ -232,7 +232,7 @@ class Reservation extends React.Component {
     return (
       <form>
         <label>
-          Is going:
+          参与:
           <input
             name="isGoing"
             type="checkbox"
@@ -241,7 +241,7 @@ class Reservation extends React.Component {
         </label>
         <br />
         <label>
-          Number of guests:
+          来宾人数:
           <input
             name="numberOfGuests"
             type="number"

From 00a22d440025aec39eb2434637887e3a86a31d4a Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Wed, 6 Mar 2019 20:41:15 -0600
Subject: [PATCH 09/10] un-translate

---
 content/docs/forms.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 13855843a4..8e7e324098 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -131,10 +131,10 @@ class EssayForm extends React.Component {
 
 ```html
 <select>
-  <option value="葡萄柚">葡萄柚</option>
-  <option value="柠檬">柠檬</option>
-  <option selected value="椰子">椰子</option>
-  <option value="芒果">芒果</option>
+  <option value="grapefruit">葡萄柚</option>
+  <option value="lime">柠檬</option>
+  <option selected value="coconut">椰子</option>
+  <option value="mango">芒果</option>
 </select>
 ```
 
@@ -165,10 +165,10 @@ class FlavorForm extends React.Component {
         <label>
           选择你喜欢的风味:
           <select value={this.state.value} onChange={this.handleChange}>
-            <option value="葡萄柚">葡萄柚</option>
-            <option value="柠檬">柠檬</option>
-            <option value="椰子">椰子</option>
-            <option value="芒果">芒果</option>
+            <option value="grapefruit">葡萄柚</option>
+            <option value="lime">柠檬</option>
+            <option value="coconut">椰子</option>
+            <option value="mango">芒果</option>
           </select>
         </label>
         <input type="submit" value="提交" />

From 27196c71c9c36d0c6762efa57c3ecc2ee5d23eb1 Mon Sep 17 00:00:00 2001
From: Xiangdong Zhang <zhangxd6@hotmail.com>
Date: Wed, 6 Mar 2019 20:42:17 -0600
Subject: [PATCH 10/10] un-translate cont

---
 content/docs/forms.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 8e7e324098..052e95ba77 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -144,7 +144,7 @@ class EssayForm extends React.Component {
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {value: '椰子'};
+    this.state = {value: 'coconut'};
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);