宁皓网 React 基础

React 是一个创建显示组件的东西， 创建好组件以后，他们就会按照你设计的去显示，当组件上的数据有变化的时候，它们会用一种非常有效率的方法自动更新变化 ..

React 是 Facebook 做的一个开源项目，也是在他们公司内部使用的一套框架。我觉得 React 是一套必学的框架。在学习它的时候，我看了一些视频，找了一些图书，最后发现 React 官方的一个文字教程特别适合刚刚开始学习 React 的人看 .. 所以这里我就基于这个文字教程，把它改编成了一套视频教程 .. 你可以更快的掌握 React 这个框架。

在视频里我会用到 ES6 的一些新功能，比如 class ，模块，箭头函数 .. 所以我又做了些 ES6 新功能的视频，到时候你可以先看一下这些视频 .. 另外，你需要使用一些工具，让浏览器现在就可以使用 ES6 的这些新功能 .. babel，jspm ，webpack 都是很好的工具 ..

创建 React 项目，你需要安装很多东西，React 本身，还有一些必要的工具，比如编译 JavaScript 用的 Babel，打包用的 webpack ..

create-react-app 这个小工具可以为我们准备好创建 React 项目需要的所有的资源 ... 先确定你的电脑上已经安装好了 node 还有 npm ..

然后用 npm 去安装一下 create-react-app ..

npm install -g create-react-app

然后再用它去创建一个 react 项目 ... 先进入到你想要保存项目的地方 .. 比如我的桌面 .. create-react-app 后面加上项目的名字 .. 比如 ninghao-react

create-react-app ninghao-react

这个工具会自动给我们下载需要的资源 ..

完成以后进入到创建好的这个项目的目录的下面 ...

cd ninghao-react

再执行一下

npm start

这个命令可以启动创建好的 react 项目 ... 然后自动会在浏览器上打开创建好的这个项目 ... 现在你看到的就是一个简单的 React 项目 ..

用编辑器打开之前我们创建的这个 React 项目 ... atom ./

node_modules 这里存储的就是项目依赖的一些东西 .. react 本身 .. webpack .. babel，还有它们依赖的一些其它的东西 ... 项目的依赖在 package.json 这个文件里说清楚了 ..

开发依赖这里，只有一个 react-scripts ，在这个包里会说清楚 react 项目需要的所有的工具 ..

dependencies 是项目的依赖 .. 这里有 react ... 还有 react-dom ...

这个项目的下面，有个 public 目录，一般公开的资源都会放在这个目录的下面 .. 现在这里有个 favicon.ico ... 还有一个 index.html ..

src 表示 source ，应用的源 ..

index.js 是应用的入口文件 ... 文档的头部先导入了一些东西 ... 比如React，ReactDOM ... 这些是一般的 React 项目必须要用的一些东西 ..

下面的 App 是定义好的一个 React 组件 ... 然后还导入了一个 css 文件 ...

在下面又用了 ReactDOM 的 render 方法，显示了一个组件 ... 就是在上面导入进来的 App 组件 ...

再打开这个 App.js

在这个文件里定义了一个叫 App 的组件 ... 这个组件在浏览器上显示的这些东西 ..

文件的一开始，导入进来两个东西，一个是 React，还有一个 Component ，定义 React 组件需要用到这个 Component ..

下面导入进来一个 logo.svg ... 它就是这里的这个 React 标志 ...

在它的下面，又导入进来一个 css 文件 .. 在这个文件里定义了组件里面需要用到的一些 css 样式 ...

继续再看这个 App.js

一个 React 组件可以是一个类 .. 这个类继承了 React 里面的 Component ...

在这个类里，用了一下 render 方法 ... 它返回了组件里要显示的一些东西 ..

这里你会看到一些像 html 的东西，但是又有点区别，比如在 html 的上面，添加 css 类，用的是 class，这里用的是 className ... 因为这些并不是 html .. 是一种特别的格式，叫 JSX .. React 会把它们转换成正常的 JavaScript ...

文件的最后，导出来上面定义的这个 React 组件 ... 这样你就可以在其它的地方，导入并且使用这个 React 组件了 ..

用 create-react-app 创建的应用里面，打开 package.json .. 在 scripts 这里定义了一些 npm 命令 .. 之前我们用过 start 这个命令 ... 它会生成一个本地服务器，可以运行你的应用 ..

这里还有一个 build 命令，它可以编译生成优化以后的应用，你可以把编译好的应用用在生产环境上 .. 在命令行的下面，执行一下：

npm run build

这里会提示 Creating an optimized production build... Compiled successfully. 为生产环境生成优化的应用，编译成功 ..

编译好的应用会放在项目的 build 目录的下面 ..

static 里面是应用需要的 css，js 还有一些媒体文件 ..

我们也可以在本地运行编译好的应用 ..

先安装一下 pushstate-server ..

npm install -g pushstate-server

再执行一下

pushstate-server build

然后在浏览器上打开 localhost:9000

这里显示的就是为生产环境编译好的 React 应用 ...

在我的桌面有一个 ninghao-react 目录 .. 它里面的东西基本上就是我们在介绍 jspm 这个工具的时候准备的 ..

因为我要在视频里用一些新的技术，所以需要使用像 jspm 这样的工具 .. 它包含的 systemjs 可以加载 javascript 模块 .. 里面的 babel ，所以可以去编译 javascript .. 而且也会把 jsx 格式的代码编译成 javasciprt ..

这些都不需要我们担心 .. 直接用最行了 .. 下面去安装一下 react .. 可以使用 jspm install .. 安装的是 react .. 因为我要使用的并不是最新的移定版 .. 所以要去指定一下你想要使用的具体的版本 ..

完成以后再去安装一下 react-dom .. jspm install react-dom .. 同样手工指定一下要使用的版本 ..

在这个项目里面，我想再用一下 semantic-ui 里的样式 .. 注意它并不是 react 项目必须的东西 .. jspm install semantic-ui ..

我想直接在项目里导入 semantic-ui 的样式 .. 这需要添加一个 jspm 插件 ... 使用 jspm install 安装一下 .. 名字是 css ..

再用 browser-sync 为项目去创建一个服务器 .. 监视一些文件的变化 .. 再用编辑器打开当前的这个目录 ...

打开 index.html .. 这里我用了一个 System.import 导入了 app 目录下的 main.js .. 再打开这个文件 ..

在这个文件里面，我们去把 semantic-ui 里的样式表导入进来 .. 用一个 import .. 导入的东西是 semantic-ui 下面的 semantic-ui.min.css .. 注意这个 css 后面要加上一个叹号 ..

这个样式表真正的位置是在 jspm_packages .. github .. Semantic-Org .. Semantic-UI@2.1.3 这个目录的下面 .. 你会看到 semantic.min.css ...

下面再去确定一下我们已经可以使用这个样式了 .. 回到 index.html .. 这里添加一个 div .. 上面用一个 ui .. 还有 container .. 这些类的样式来自 semantic ui .. 在它里面添加一个按钮 ..

button.ui.green.button .. 在这个包装上面再添加点内边距 ..

保存 .. 回到浏览器 .. 在这里会显示一个绿色的按钮 .. 打开开发者工具 .. Elements .. 在 head 标签里面 .. 你会看到导入进来的 css 文件 ..

jspm install react@0.14.0-rc1
jspm install react-dom@0.14.0-rc1
jspm install semantic-ui
jspm install css

React 可以让我们把要显示的东西分割成不同的组件，然后可以再把这些组件组合到一块儿去用。比如一个评论功能，可以定义成几个组件，最外面是一个评论的包装，这外包装组件可以叫它 CommentBox .. 包装里面是一个评论列表，它也可以是单独的一个组件，起个名字可以是 CommentList .. 评论列表里是每个评论，这些评论又是一个组件，这个组件可以叫它 Comment ..

另外添加评论用的这个表单也可以单独定义成一个组件 .. 名字可以是 CommentForm ..

下面我们就去创建一个组件 .. 我们把每个组件单独放到一个 js 文件里面 .. 在 app 这个目录的下面，添加一个 js 文件，把它放到 comment 这个目录的下面，文字的名字就是组件的名字 .. CommentBox.js ..

文件的头部用一个 'use strict'; 然后再导入 react 模块 .. 导入进来可以叫它 React ..

import React from 'react';

定义的组件可以是一个类，先用一个 class .. 然后是组件的名字 .. CommentBox .. 让它去继承 React 的 Component ..

class CommentBox extends React.Component

在这个类里面可以去定义这个组件的一些功能，至少你要添加一个 render() 方法，在这里去定义组件要显示的东西 .. 这个方法返回的就是要显示的东西 .. 在这个 return 的后面添加一组括号 .. 这样你可以在多行去定义要显示的东西 .. 这些要显示的东西可以直接使用类似 html 的形式 ..

一组 div 标签 .. 在上面你可以添加一些其它的属性 .. 一般这些属性跟在普通的 html 上是一样的 .. 不过有几个特殊的例子 .. 比如你要在这个标签上添加一个 class .. 因为 class 是 javascript 保留的关键词 .. 所以这里我们可以用一个 className 来表示在 html 上的 class .. 再设置一下这个属性的具体的值 .. ui comments

这组 div 标签里面，再添加一个 h1 标签 .. 添加点文字 .. 这里我们定义的要显示的东西用的是 jsx 的格式 .. 它会被转换成普通的 javascript .. 后面我们会继续介绍 jsx .. 在这个评论的下面，再添加一个 div .. 上面加上 ui 还有 divier 这两个类 ..

现在你看到的就是一个最基本的 React 组件 .. 在文件的底部可以把它作为这个模块默认的东西导出来 .. 这样在其它的地方我们可以导入这个组件的功能 ..

export { CommentBox as default };

在这个 comment 目录下的 CommentBox.js 里，我们定义了一个 React 组件，名字是 CommentBox .. 下面我想把它显示在页面上 ..

先打开 index.html .. 去掉这个 container 里面的按钮 .. 然后用一个 id 是 app 的 div 标签 .. 保存 .. .. （#app） .. 再打开 app 目录下的 main.js ..

先选择一下文件的格式 .. 可以使用 babel es6 javascript .. 这个格式是 Atom 编辑器的 language-babel 插件提供的 ..

下面使用 import 去导入 react ..

import React from 'react';

然后是 react-dom ... import ReactDOM from 'react-dom' ..

再把前面定义的 CommentBox 导入进来 .. 位置是当前目录下的 comment 下面的 CommentBox ..

import CommentBox from './comment/CommentBox';

显示组件可以使用 ReactDOM 的 render 方法 .. 这个方法有两个参数，一个是要显示的组件 .. 第二个参数是要显示的位置 .. 这里要显示的组件是 CommentBox 　.. 因为我们用的是 jsx 的形式 .. 所以可以把组件当成一个标签来用 .. 这个标签可以自己关闭 .. 也可以分成开始还有关闭标签 ..

逗号分隔一下 .. 接着是组件要显示在哪个地方 .. 这里用一个 document.getElementById ... 找到页面上 id 是 app 的这个元素 ..

在 index.html 里面，已经使用了 System.import ，导入了 app 下的 main.js .. 打开浏览器 .. 在页面上会显示 CommentBox 这个组件要显示的东西 ..

在浏览器的开发者工具里面，打开 Elements 选项卡 .. .. 找到 app 这个元素 ... 你会看到它包装了一组 div ，上面有一个 class 属性 .. 它的值是 ui comments .. 在这个 div 里面是一组 h1 标签 .. 上面的文字是 评论 .. 它下面还有一组 div ..

这些东西就是 CommentBox 组件要显示的内容 .. 再打开 React 这个选项卡 .. 这里你会看到页面上的 React 组件 .. 现在只有一个 CommentBox .. 这个 React 开发工具，你可以在 Chrome 浏览器的应用商店里找到 ..

https://atom.io/packages/language-babel

再去定义两个 React 组件，然后再把这些组件组合到一块儿 .. 在 app/comment 下面，添加一个 js 文件 .. 名字是 CommentList.js .. 评论列表组件 .. 'use strict'; 再导入 react .. 定义一个 class ，名字是 CommentList .. 这个 class 是一个 React 组件， 所以可以让它去继承 React.Component ..

类里添加一个 render 方法 .. 返回组件要显示的东西 .. 这里先简单的添加一行文字 .. 把它放到一个 div 标签里面 .. 评论列表 .. 最后再导出这个 class ..

复制一下这个文件里的内容 .. 下面再去添加一个 js 文件 .. 位置是 app/comment .. 名字是 CommentForm.js .. 评论的表单 .. 粘贴复制的东西 .. 然后再修改一下 .. class 的名字是 CommentForm .. 要导出的东西的名字也是这个 .. CommentForm ..

再去掉 render 里要要返回的东西 ... 在这里，我们添加一个评论用的表单 .. 一组 form 标签 .. 上面加上 ui reply form 这几个类 .. 在这个表单里再添加几个元素 ... 现在它里面有三个表单元素 .. 文本框 .. 文本区域，还有一个提交按钮 .. 这个表单的样式是 semantic ui 设计的 .. 保存 ..

下面我们再去把这些组件组合到一块儿 .. 打开之前定义的 CommentBox.js .. 在这个文件的头部，先去导入 CommentList ... 复制一下 .. 再导入 CommentForm ..

在 CommentBox 的这个组件的 render 方法里 .. 可以使用标签的形式去把 CommentList 还有 CommentForm 添加进来 .. 这个标签可以是自关闭的标签 ..

打开浏览器 .. 上面会显示 CommentList 组件的评论列表 .. 还有 CommentForm 组件上的评论表单 .. 再打开，开发者工具 .. Elements .. 在这个 CommentBox 里面，你可以找到 CommentList 还有 CommentForm 要显示的东西 ..

再看一下 React 选项卡 .. 在页面上有一个 CommentBox 组件，这个组件里面，包含了 CommentList 还有 CommentForm 这两个组件 ..

组件里面可以包含一些数据，这些数据一般都是它爸爸传递给它的 .. 下面再去定义一个叫 Comment 的组件 .. 把它放到 CommentList 里面， 再从 CommentList 组件里传递一些数据到 Comment 组件里 .. 这些数据会作为子组件里的属性，也就是你可以在 Comment 里面，使用这些属性得到它爸爸给它的数据。

这些属性可以在 this.props 里面访问到，在后面要加上属性的具体的名字 .. 在 app/comment 的下面添加一个 js 文件，名字是 Comment.js .. 先用一个 'use strict'; .. 再导入 react ... 然后定义一个 class .. 名字是 Comment .. 继承 React.Component .. 添加一个 render 方法 .. 返回一些东西 ..

先用一个 div 标签 .. 上面添加一个 class .. 名字是 comment .. 它里面又是一组 div .. 上面再加上一个 content 类 .. 在它的里面， 再用一组 span . . 上面加上 author 这个类 .. 它里面的东西就是评论的作者 ..

这里我们用一个属性来表示 .. 先用一组大括号 .. this.props .. 后面是属性的名字 .. 比如 author .. 一会儿我们会从 Comment 组件的父组件那里传递这个属性的值 ..

然后是一组 div .. 加上一个 metadata，它里面可以放一些评论相关的信息，比如评论的时间 .. 用一个 span 标签，加上 date 这个类 .. 在这里用一个属性 .. 一组大括号 .. this.props.date .. 属性的名字是 date ..

在它下面再添加一组 div 标签 .. 加上一个 text 类 .. 这个标签里放的是评论的内容 .. 同样使用一个属性 .. 一组大括号 .. this.props .. 这里我们用一个特殊的属性的名字 .. children .. 一会再解释这个属性的值在什么地方..

最后再给 Comment 作为默认的东西导出来 .. 然后打开 CommentList .. 在文字的头部，先导入 Comment .. 位置就是当前目录下的 Comment 这个文件 ..

在这个组件要显示的东西里面 .. 我们用一下 Comment 这个组件 .. 周围需要添加一个包装 .. 直接用这个 div 标签 .. 添加一个开始标签 .. Comment .. 再输入一个结束标签 /Comment ..

在这个标签上，我们可以添加一个 author 属性 .. 这个属性就是 Comment 里面需要的 author .. 直接设置一下它的值 .. 再设置一下 date 这个属性 .. 给它一个值 ...

然后在这个开始还有结束标签之间，再输入点文字 .. 这里的东西就是 this.props.children .. 天气不错哦 ..

再复制一行 .. 修改一下 author 属性的值 .. 然后是评论的内容 ..

保存 ... 打开浏览器 .. 上面会显示评论的内容 .. 打开开发者工具里的 Elements 选项卡 .. 在 comments 下面，包装的是 CommentList ，CommentList 里面用了 Comment 组件， 这里你会看到有两个带 comment 类的 div 标签 ..

再看一下 React 选项卡 .. CommentBox 包装 CommentList，CommentList 包装了两个 Comment .. 选中其中的一个 .. 在右边这里会显示上面的 props ..

之前我们在 CommentList 这个组件里面，手工的设置了要传递给 Comment 组件的数据 .. 这些数据一般应该是来自服务端 .. 你可以通过一些方法向服务端去请求数据 ..

这里我们先模拟一下 .. 打开 main.js .. 这里定义一个表示评论数据的变量 .. 名字是 comments .. 它的值是一个 json 格式的数据 .. 这里有两个项目 .. 每个项目都有一个名字 .. author 是作者 .. date 是评论发布的时间 .. text 表示评论的内容 ..

下面可以在这个 render 方法里，把这个数据传递给 CommentBox 组件 .. 添加一个 data 属性 .. 这样你可以在 CommentBox 里，得到 data 这个属性的值 .. 把它的值设置成在上面定义的这个 comments 变量 .. 把它放在一组大括号 ..

再打开 CommentBox 这个组件 .. 它里面嵌入了 CommentList 这个组件 .. 我们可以再前面用 render 方法传递过来的数据再交给 CommentList 这个组件 .. 添加一个 data 属性 .. 它的值是一组大括号 .. 里面是 this.props.data ..

然后打开 CommentList .. 我们再改造一下它的 render 方法 .. 可以循环的去处理一下传递过来的数据 .. 这里就是 this.props.data .. 定义一个变量 .. 名字是 commentNodes .. 它的值是循环的处理数据之后的结果 .. this.props.data .. 这里就是传递过来的数据 .. 使用一个 map 方法 .. 去处理一下每条评论的数据 ..

在它里面用一个箭头函数 .. comment 是函数的参数 .. 一个箭头 .. 它的右边是函数具体要做的事情 .. 一组大括号 .. 里面用一个 return .. 返回一些东西 .. 再用一组括号 .. 返回的就是每条评论的内容 .. 添加一组 Comment 标签 .. 设置一下要传递给 Comment 这个组件的数据 ..

用一个 author 属性 .. 它的值是 ｛comment.author｝.. 再用一个 date .. 值是 {comment.date} .. 这组 Comment 标签之间，再用一个 {comment.text} ...

这样这个组件真正返回的东西可以是一组 div 标签 .. 里面的东西可以使用 commentNodes 来表示 .. 保存 .. 打开浏览器 ..

上面会显示评论的内容 .. 这个评论里的数据是从 ReactDOM.render 方法里，传递给 CommentBox 组件，再从 CommentBox 组件传递给 CommentList .. 在这个组件里循环的处理了一下传递过来的每条评论 .. 每次处理都会用一下 Comment 组件，把评论上的数据，比如作者，日期，还有评论的内容交给 Comment 组件。

在上个视频我们手工定义了一个变量，里面添加了一些数据，然后把它放到组件里去使用。一般你需要一种方法可以从服务端请求回数据 .. 组件有了数据以后会把它们显示出来 .. 得到新的数据以后 React 会用一套非常有效率的方法重新显示组件，它只会重新显示需要的地方 ..

我们可以使用 ajax 的方法去请求数据 .. 服务端可以用一个简单的 json 格式的文件模拟一下 .. 打开 main.js .. 改一下这里的 render 方法 .. 去掉 data 这个属性 .. 添加一个 url 属性 .. 它的值设置成一个 json 文件的地址 .. 一般这个地址应该是服务端提供的一个端点 .. 这里设置成 app/comments.json ..

剪切一下 comments 变量的值 .. 然后再去掉上面这个 comments 变量 .. 在 app 目录下面添加一个文件 .. 名字是 comments.json .. 把剪切的东西粘贴到这里 ..

前面我们给组件的数据是 props ，属性 .. 这些属性从爸爸那里传过来，也属于爸爸 .. 并且是不能变的 .. 我们可以给组件添加点交互 .. 可以在组件里添加能改变的 state .. 也就是状态 .. 状态属于组件私有的东西 .. 在组件的内部可以使用 this.state 访问到组件里的状态 ..

我们可以使用 this.setState() 这个方法去设置组件的状态 .. 如果说状态有变化了 .. 组件会重新显示它们自个儿 ..

在这个 CommentBox 组件里面，我们去向服务端请求一些数据，然后放到它的状态里 .. 添加一个 constructor ，构造函数 .. 支持一个参数 .. 名字是 props ..

constructor(props) {}

在它里面需要调用一下 super 方法 .. 再把 props 交给它 .. 然后我们可以设置一下组件的初始化的状态 .. 用一个 this.state .. 它的值是一个对象 .. 对象里添加一个叫 data 的状态 .. 它的值默认是一个空白的数组 ..

再把 data 这个状态里的数据传递给它的一个儿子 .. 这里就是 CommentList 这个组件 .. data 属性的值设置成 this.state.data ..

下面我们需要一个方法去向服务端请求点数据，然后再去设置一下 data 这个状态 .. 同样在这个 constructor 构造函数里面去请求数据 ..

可以使用 ajax 方法，这里可以使用 jquery 提供的 ajax 方法 .. 打开命令行，先去安装一下 jquery ...

jspm install jquery

完成以后，回到编辑器 .. 在文件的头部，再去导入 jquery ..

import $ from 'jquery';

回到 constructor 这个方法里面 .. $.ajax() .. 给它一个对象 .. 再去配置一下这个 ajax 方法 .. 添加一个 url ，设置一下要请求的地址 .. 这里可以使用 this.props.url ，这个属性的值是从 main.js 里的 render 方法里面传递过来的 ..

再添加一个 dataType .. 数据的类型设置成 json .. cache .. 缓存，设置成 false .. 再添加一个 success 方法 .. 请求成功以后，会把请求回来的数据交给这个方法 .. 名字可以是 comments .. 在它里面使用 this.setState .. 去设置一下组件的状态 .. 给它一个对象 .. 要设置的是 data 这个状态 .. 它的值设置成 comments ，就是使用 ajax 请求回来的数据 ..

再添加一个 error .. 处理一下请求出现的错误 .. 有三个参数 .. xhr, status, error .. 出现以后简单的把 error 输出到控制台上 ..

保存 ... 回到浏览器 .. 同样会显示一些评论的内容 .. ReactDOM.render 给 CommentBox 组件一个地址属性 .. 在 CommentBox 组件里，会用 ajax 方法去请求这个地址 .. 然后把返回来的数据交给一个叫 data 的状态 .. 然后再把这个 data 交给它的儿子 CommentList ... 这个组件接到数据以后会循环处理每条评论，并且把它们显示出来 ..

设置组件状态以后，如果状态跟之前相比有变化，这个组件就会重新显示。我们可以使用某种方法，跟服务端保持沟通，比如 WebSocket .. 这样服务端上的数据有变化的时候就会发出通知 .. 这样我们就可以执行一下 setState 去设置一下组件的状态，让它重新显示。

这里我们可以简单的设置一下，每隔 5 秒钟去向服务端发出一次请求，然后再执行一下组件的状态 .. 先把发请求的这个 ajax 方法单独设置成一个方法 .. 剪切一下 constructor 里的 ajax 方法 .. 在它下面现去定义一个方法 .. 名字是 getComments .. 它做的事就是使用这个 ajax 方法去请求数据 ..

然后在这个 constructor 里面，先使用一下这个方法 .. this.getComments(); .. 然后再用一个 setInterval 设置一下每隔几秒钟就去执行一下这个 getComments() ..

先给它一个函数 .. 这个函数的作用就是去执行一下 this.getComments() .. 逗号分隔一下 .. 再设置一下间隔的时间 .. 这里设置成 5000 毫秒 .. 也就是每隔 5 秒钟就会执行 getComments 向服务端发生请求 .. 保存 ..

打开浏览器 .. 再打开 comments.json 这个文件 .. 这里我们可以手工去添加一条新的评论数据 .. 保存 ... 过几秒钟以后， 页面上会出现新添加的评论 ..

因为 CommentBox 这个组件每隔 5 秒会去发出一次请求，然后设置一下组件的状态 .. 状态有变化的话，组件就会更新一下显示 ..

这里再添加几条评论数据 ... 过一会儿，这些评论又会显示在页面上 .. 再去掉一些评论内容 ... 过一会儿，页面上也会更新一下显示，去掉已经删除掉的评论 ...

在 React 的组件里面使用事件，可以在元素上添加一个事件名字的属性 .. 属性的值就是发生这个事件的时候要做的事 .. 比如在一个按钮上，添加一个 onClick .. 按下按键的事件就是 onKeyDown ，复制的事件是 onCopy .. 提交表单的事件是 onSubmit .. 这些事件的名字都是 on 开头的 .. 表示事件的词，首字母是大写的 ..

下面打开 CommentForm.js 这个文件 .. 这里我先设计了一下这个组件要显示的东西，就是一个提交评论用的表单 .. 里面有一个文本框，文本区域，还有一个提交表单用的按钮 ..

在这个 form 上面，添加一个 onSubmit .. 设置一下提交表单以后要做的事 .. 一组大括号 .. this.handleSubmit ... 在这个组件里面，再去定义这个 handleSubmit 方法 .. 方法接收一个 event 参数 .. 表示事件 ..

在这个方法里面，先使用一个 event 的 preventDefault() 方法，去掉事件默认要做的事儿 .. 在它下面，再用一个 console.log .. 在控制台上输出 提交表单！ 这几个字儿 ..

保存 .. 打开浏览器 .. 再打开控制台 .. 然后点击这个评论表单上的提交按钮 .. 在控制台上会输出 提交表单 这几个字儿 ..

想在组件上访问到显示在页面上的元素，我们可以通过 refs .. 比如我要在用户提交评论的表单的时候，得到用户在表单里填写的数据 ..

打开 CommentForm.js .. 找到里面的这个 input 元素 .. 这个文本框里的内容是用户的姓名 .. 在上面添加一个 ref .. 它的值设置成 author .. 然后在这个文本区域的上面，也添加一个 ref .. 值设置成 text .. 这样我们就可以使用 this.refs.text 得到这个文本区域 ..

在这个 handleSubmit 方法里面 .. 添加两个变量 . 先添加一个 author .. 它的值就是 this.refs.author ，找到 ref 值是 author 的这个元素，它就是显示在浏览器上的那个文本框元素 .. .. 然后再访问一下它的 value 属性的值，这个属性里面就是在 author 这个文本框里输入的内容 ..

再添加一个变量 .. 名字是 text .. 它的值就是 this.refs.text .. 也就是评论表单上的文本区域 .. 访问一下 value 的值 ..

下面我们可以测试一下，在控制台上输出 author .. 还有 text .. 打开浏览器 .. 还有控制台 .. 在评论表单上输入点东西 .. 点击 添加评论 ..

控制台上会显示一个错误，说找不到 refs 这个属性 .. 这是因为在这个 handleSubmit 里面丢了 this .. 在这个 this.handleSubmit 的后面，可以再绑定一个 this .. 保存 .. 再回到浏览器上 .. 输入点东西 .. 点击 提交 ..

这回会把我在表单上填写的内容输出到控制台上 ..

用户在提交评论以后，我们需要把评论的内容交给服务端去处理，然后需要再把新添加的评论显示在评论的列表上 .. 这些动作可以在 CommentBox 这个组件上去做 .. 因为这个组件拥有评论列表里的数据 ..

这样我们就需要一种方法，把在 CommentForm 评论表单上的新的评论内容上交给它的爸爸，也就是 CommentBox 这个组件 .. 可以这样 .. 在 CommentBox 上面添加一个方法 .. 把这个方法交给评论表单 .. 告诉它有人添加评论的时候把评论的内容放到这个方法里执行一下 .. 这样 CommentBox 就能得到用户在 CommentForm 上提交的新评论了 ..

先打开 CommentBox.js .. 添加一个方法 .. 名字是 handleCommentSubmit .. 给它一个参数，名字是 comment .. 先在控制台上输出这个 comment ..

找到这个组件的 render 方法 .. 在 CommentForm 的上面，添加一个属性 .. 名字可以是 onCommentSubmit .. 值就是刚才定义的这个方法 .. this.handleCommentSubmit ..

再打开 CommetForm 这个组件 .. 这里的 handleSubmit 方法就是在提交表单以后要执行的东西 .. 这里我已经得到了表单里的 author 还有 text ，也就是用户名还有评论的内容 ..

在下面再执行一下 this.props.onCommentSubmit .. 给它一个对象 .. 把 author 还有 text 放到这个对象里面 .

打开浏览器 .. 还有浏览器的控制台 .. 在评论表单里面添加点东西 .. 点击提交 .. 在控制台上，会输出一个对象 .. 里面有两个属性 .. 就是在表单上面添加的用户名还有评论的内容 ..

后面会显示这个信息是 CommentBox.js 输出的 ..

现在并没有一个真正的服务端去处理我们发送的请求 .. 不过可以模拟一下这个流程 .. 打开 CommentBox.js 这个组件 .. 找到 handleCommentSubmit 这个方法 ..

提交评论以后，用户在评论表单里填写的数据在这个方法里面可以得到 .. 得到新的评论，把它发给服务端，然后再设置一下组件的状态，如果状态发生变化，React 会重新显示这个组件 ..

这里先添加一个变量 .. 名字是 comments .. 先得到组件现有的评论内容 .. 这里就是 data 这个状态 .. this.state.data .. 然后再得到新的评论列表 .. 也就是现有的评论，加上用户刚刚提交的评论 ..

可以用一个 newComments 来表示这个新的评论列表 .. 它的值就是 comments 现有的评论列表 .. 用一个 concat .. 加上 .. comment .. 这个 comment 就是用户新提交的评论 ..

然后再使用一下 setState 重新设置一下组件的状态 .. this.setState .. 设置的是 data .. 它的值就是这个 newComments ..

再注释掉 constructor 里面的这个 setInterval .. 因为我们并没有把评论保存到服务端 .. 所以请求回来的评论列表，仍然是 comments.json 这个文件里的内容 ..

在 handleCommentSubmit 里面需要使用到 this .. 所以在下面的这个 this.handleCommentSubmit 的后面，可以给它绑定一个 this .. 一条评论内容有作者，发布日期还有评论内容组成 .. 这个发布日期你应该再处理一下 .. 下面我们可以手工设置一下评论的发布日期 ..

打开 CommentForm.js .. 在这个 this.props.onCommentSubmit 里面 .. 添加一个 date 属性 .. 它的值我们可以先手工的设置成 刚刚 .. 保存一下修改之后的文件 ..

回到浏览器 .. 在评论表单里输入点内容 .. 然后点击 提交 .. 添加的评论会立即出现在评论列表里面 .. 因为添加了新的评论，组件的状态有了变化 .. 所以 React 会重新显示组件发生变化的地方 ..