{"patch":"diff --git a\/docs\/docs\/07-forms.zh-CN.md b\/docs\/docs\/07-forms.zh-CN.md\nnew file mode 100644\nindex 0000000000..b5a7f3f49a\n--- \/dev\/null\n+++ b\/docs\/docs\/07-forms.zh-CN.md\n@@ -0,0 +1,168 @@\n+---\n+id: forms-zh-CN\n+title: 表单组件\n+permalink: forms-zh-CN.html\n+prev: transferring-props-zh-CN.html\n+next: working-with-the-browser-zh-CN.html\n+---\n+\n+诸如 ``、`

`、`<option>` 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。\n+  \n+关于 `<form>` 事件详情请查看 [表单事件](\/react\/docs\/events.html#form-events)。\n+\n+## 交互属性    \n+    \n+表单组件支持几个受用户交互影响的属性：\n+    \n+* `value`，用于 `<input>`、`<textarea>` 组件。\n+* `checked`，用于类型为 `checkbox` 或者 `radio` 的 `<input>` 组件。\n+* `selected`，用于 `<option>` 组件。\n+\n+在 HTML 中，`<textarea>` 的值通过子节点设置；在 React 中则应该使用 `value` 代替。        \n+\n+表单组件可以通过 `onChange` 回调函数来监听组件变化。当用户做出以下交互时，`onChange` 执行并通过浏览器做出响应：\n+          \n+* `<input>` 或 `<textarea>` 的 `value` 发生变化时。\n+* `<input>` 的 `checked` 状态改变时。\n+* `<option>` 的 `selected` 状态改变时。\n+              \n+和所有 DOM 事件一样，所有的 HTML 原生组件都支持 `onChange` 属性，而且可以用来监听冒泡的 `change` 事件。               \n+              \n+              \n+## 受限组件              \n+\n+设置了 `value` 的 `<input>` 是一个*受限*组件。 对于受限的 `<input>`，渲染出来的 HTML 元素始终保持 `value` 属性的值。例如：\n+\n+```javascript\n+  render: function() {\n+    return <input type=\"text\" value=\"Hello!\" \/>;\n+  }\n+```\n+              \n+上面的代码将渲染出一个值为 `Hello!` 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为     `Hello!`。如果想响应更新用户输入的值，就得使用 `onChange` 事件：\n+\n+```javascript\n+  getInitialState: function() {\n+    return {value: 'Hello!'};\n+  },\n+  handleChange: function(event) {\n+    this.setState({value: event.target.value});\n+  },\n+  render: function() {\n+    var value = this.state.value;\n+    return <input type=\"text\" value={value} onChange={this.handleChange} \/>;\n+  }\n+```\n+\n+上面的代码中，React 将用户输入的值更新到 `<input>` 组件的 `value` 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：\n+\n+```javascript\n+  handleChange: function(event) {\n+    this.setState({value: event.target.value.substr(0, 140)});\n+  }\n+```\n+\n+上面的代码接受用户输入，并截取前 140 个字符。\n+\n+              \n+## 不受限组件\n+\n+没有设置 `value`(或者设为 `null`) 的 `<input>` 组件是一个*不受限*组件。对于不受限的 `<input>` 组件，渲染出来的元素直接反应用户输入。例如：\n+\n+```javascript\n+  render: function() {\n+    return <input type=\"text\" \/>;\n+  }\n+```\n+\n+上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 `onChange` 事件可以监听值的变化。\n+\n+如果想给组件设置一个非空的初始值，可以使用 `defaultValue` 属性。例如：\n+\n+```javascript\n+  render: function() {\n+    return <input type=\"text\" defaultValue=\"Hello!\" \/>;\n+  }\n+```\n+\n+上面的代码渲染出来的元素和**受限组件**一样有一个初始值，但这个值用户可以改变并会反应到界面上。\n+\n+同样地， 类型为 `radio`、`checkbox` 的`<input>` 支持 `defaultChecked` 属性， `<select>` 支持 `defaultValue` 属性。\n+\n+```javascript\n+  render: function() {\n+      return (\n+          <div>\n+            <input type=\"radio\" name=\"opt\" defaultChecked \/> Option 1\n+            <input type=\"radio\" name=\"opt\" \/> Option 2\n+            <select defaultValue=\"C\">\n+              <option value=\"A\">Apple<\/option>\n+              <option value=\"B\">Banana<\/option>\n+              <option value=\"C\">Cranberry<\/option>\n+            <\/select>\n+          <\/div>\n+      );\n+    }\n+```                \n+\n+\n+## 高级主题\n+                \n+### 为什么使用受限组件？\n+\n+在 React 中使用诸如 `<input>` 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。\n+                \n+比如下面的代码：                \n+\n+```html\n+  <input type=\"text\" name=\"title\" value=\"Untitled\" \/>\n+```\n+\n+在 HTML 中将渲染初始值为 `Untitled` 的输入框。用户改变输入框的值时，节点的 `value` 属性（*property*）将随之变化，但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.\n+\n+与 HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：\n+\n+```javascript\n+  render: function() {\n+    return <input type=\"text\" name=\"title\" value=\"Untitled\" \/>;\n+  }\n+```\n+\n+该方法在任何时间点渲染组件以后，输入框的值就应该*始终*为 `Untitled`。\n+\n+\n+### 为什么 `<textarea>` 使用 `value` 属性？\n+\n+在 HTML 中， `<textarea>` 的值通常使用子节点设置：\n+\n+```html\n+  \n+  <textarea name=\"description\">This is the description.<\/textarea>\n+```\n+                  \n+对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符限制，可以使用 `\\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`<\/textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 `<textarea>` 值时不应该使用子节点：\n+\n+```javascript\n+  <textarea name=\"description\" value=\"This is a description.\" \/>\n+```\n+\n+如果*非要**使用子节点，效果和使用 `defaultValue` 一样。\n+\n+\n+### 为什么 `<select>` 使用 `value` 属性                  \n+\n+HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状态；React 为了更方面的控制组件，采用以下方式代替：\n+\n+```javascript\n+  <select value=\"B\">\n+    <option value=\"A\">Apple<\/option>\n+    <option value=\"B\">Banana<\/option>\n+    <option value=\"C\">Cranberry<\/option>\n+  <\/select>\n+```\n+\n+如果是不受限组件，则使用 `defaultValue`。\n+\n+> 注意：\n+>\n+> 给 `value` 属性传递一个数组，可以选中多个选项：`<select multiple={true} value={['B', 'C']}>`。\ndiff --git a\/docs\/docs\/ref-05-events.zh-CN.md b\/docs\/docs\/ref-05-events.zh-CN.md\nnew file mode 100644\nindex 0000000000..2da62a1838\n--- \/dev\/null\n+++ b\/docs\/docs\/ref-05-events.zh-CN.md\n@@ -0,0 +1,194 @@\n+---\n+id: events-zh-CN\n+title: 事件系统\n+permalink: events-zh-CN.html\n+prev: tags-and-attributes-zh-CN.html\n+next: dom-differences-zh-CN.html\n+---\n+\n+## 合成事件\n+\n+事件处理程序通过 `合成事件`（`SyntheticEvent`）的实例传递，`SyntheticEvent` 是浏览器原生事件跨浏览器的封装。`SyntheticEvent` 和浏览器原生事件一样有 `stopPropagation()`、`preventDefault()` 接口，而且这些接口夸浏览器兼容。\n+\n+如果出于某些原因想使用浏览器原生事件，可以使用 `nativeEvent` 属性获取。每个和成事件（`SyntheticEvent`）对象都有以下属性：\n+\n+```javascript\n+boolean bubbles\n+boolean cancelable\n+DOMEventTarget currentTarget\n+boolean defaultPrevented\n+Number eventPhase\n+boolean isTrusted\n+DOMEvent nativeEvent\n+void preventDefault()\n+void stopPropagation()\n+DOMEventTarget target\n+Date timeStamp\n+String type\n+```\n+\n+> 注意：\n+>\n+> React v0.12 中，事件处理程序返回 `false` 不再停止事件传播，取而代之，应该根据需要手动触发 `e.stopPropagation()` 或 `e.preventDefault()`。\n+\n+\n+## 支持的事件\n+\n+React 将事件统一化，使事件在不同浏览器上有一致的属性。\n+\n+下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序，应该使用 `Capture` 事件，例如使用 `onClickCapture` 处理点击事件的捕获阶段，而不是 `onClick`。\n+\n+\n+### 剪贴板事件\n+\n+事件名称：\n+\n+```\n+onCopy onCut onPaste\n+```\n+\n+属性：\n+\n+```javascript\n+DOMDataTransfer clipboardData\n+```\n+\n+\n+### 键盘事件 \n+\n+事件名称：\n+\n+```\n+onKeyDown onKeyPress onKeyUp\n+```\n+\n+属性：\n+\n+```javascript\n+boolean altKey\n+Number charCode\n+boolean ctrlKey\n+function getModifierState(key)\n+String key\n+Number keyCode\n+String locale\n+Number location\n+boolean metaKey\n+boolean repeat\n+boolean shiftKey\n+Number which\n+```\n+\n+\n+### 焦点事件\n+\n+事件名称\n+\n+```\n+onFocus onBlur\n+```\n+\n+属性：\n+\n+```javascript\n+DOMEventTarget relatedTarget\n+```\n+\n+\n+### 表单事件\n+\n+事件名称：\n+\n+```\n+onChange onInput onSubmit\n+```\n+\n+关于 `onChange` 事件的更多信息，参见 [表单组件](\/react\/docs\/forms-zh-CN.html)。\n+\n+\n+### 鼠标事件\n+\n+事件名称：\n+\n+```\n+onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave\n+onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave\n+onMouseMove onMouseOut onMouseOver onMouseUp\n+```\n+\n+属性：\n+\n+```javascript\n+boolean altKey\n+Number button\n+Number buttons\n+Number clientX\n+Number clientY\n+boolean ctrlKey\n+function getModifierState(key)\n+boolean metaKey\n+Number pageX\n+Number pageY\n+DOMEventTarget relatedTarget\n+Number screenX\n+Number screenY\n+boolean shiftKey\n+```\n+\n+\n+### 触控事件\n+\n+在渲染任意组件之前调用 `React.initializeTouchEvents(true)`，以启用触控事件。\n+\n+事件名称：\n+\n+```\n+onTouchCancel onTouchEnd onTouchMove onTouchStart\n+```\n+\n+属性：\n+\n+```javascript\n+boolean altKey\n+DOMTouchList changedTouches\n+boolean ctrlKey\n+function getModifierState(key)\n+boolean metaKey\n+boolean shiftKey\n+DOMTouchList targetTouches\n+DOMTouchList touches\n+```\n+\n+\n+### 用户界面事件\n+\n+事件名称：\n+\n+```\n+onScroll\n+```\n+\n+属性：\n+\n+```javascript\n+Number detail\n+DOMAbstractView view\n+```\n+\n+\n+### 滚轮事件\n+\n+事件名称：\n+\n+```\n+onWheel\n+```\n+\n+属性：\n+\n+```javascript\n+Number deltaMode\n+Number deltaX\n+Number deltaY\n+Number deltaZ\n+```\n","body":"add Forms and Event System docs Chinese translation","parents":["d471fb4c0bd720c46443a3cb00418e5ec0a8109f","309507955b92d89f1caa8130f67e7f3dd4606ee1"],"commit":{"revision":"1b85e611adb9b69866a37275dda055030ca757a1","authorEmail":"paul@oshannessy.com","authorName":"Paul O’Shannessy","subject":"Merge pull request #2734 from Minwe\/master","shortRevision":"1b85e611ad","authoredAt":"2015-01-16T13:06:12-08:00"},"files":[{"status":"A","path":"docs\/docs\/07-forms.zh-CN.md"},{"status":"A","path":"docs\/docs\/ref-05-events.zh-CN.md"}]}</article></body></html>

dillon1000/react

Files changed