【第22期】观点:IT 行业加班,到底有没有价值?

ReactJS 15.x - 例子二,综合运用

原创 2016年08月29日 01:33:45


 组件化、模块化
 this.props.attr1 // 父节点传递进来的属性参数
 this.setState({attr1: 'attr1_value'}); // 设置当前组件的“视图数据”,并会触发渲染视图
 this.state.attr1 // 读取当前组件的“视图数据”
 方法componentDidMount,在组件渲染后,React 会自动调用




test.html文件内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>例子</title>
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
  <body>
    <div id="content1"></div>
	
    <script type="text/babel" src="reactjs/module1/comment.js"></script>
   
  </body>
</html>

common.js文件内容

// 评论组件
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
          {this.props.author}, {this.props.children}
      </div>
    );
  }
});

// 评论列表组件
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      // 渲染单条评论
	  return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
	
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
	
  }
});

// 表单组件
var CommentForm = React.createClass({
  getInitialState: function() { // 数据容器
    return {author: 'author3', text: 'author3 comment text'};
  },
  handleAuthorChange: function(e) { //  表单input事件处理器
    this.setState({author: e.target.value});
  },
  handleTextChange: function(e) { // 表单input事件处理器
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) { // 表单提交数据事件处理器
    e.preventDefault();
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    if (!text || !author) {
      return;
    }
    // 调用父节点传递进来的事件处理器
	this.props.onCommentSubmit({author: author, text: text});

	// 清空表单的数据
    this.setState({author: '', text: ''});
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Your name"
          value={this.state.author}
          onChange={this.handleAuthorChange}
        />
        <input
          type="text"
          placeholder="Say something..."
          value={this.state.text}
          onChange={this.handleTextChange}
        />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

// 存放列表和表单的组件
var CommentBox = React.createClass({
  // 从服务端加载数据
  loadCommentsFromServer: function() {
//    $.ajax({
//      url: this.props.url, // 请求数据的地址
//      dataType: 'json', 
//      cache: false,
//      success: function(data) {
//        this.setState({data: data}); // 修改数据,会触发更UI的内容
//      }.bind(this),
//      error: function(xhr, status, err) {
//        console.error(this.props.url, status, err.toString());
//      }.bind(this)
//    });
	  this.setState({ // 保存数据,会更新列表
		  data: [
			  {"id": "1", "author": "author1", "text": "author1 comment text"},
			  {"id": "2", "author": "author2", "text": "author2 comment text"}
		  ]
	  });
  },
  // 表单提交事件
  handleCommentSubmit: function(comment) {
	// 为了让保存数据看起来比较快,先把数据添加到列表,等待服务器返回,再刷新实际数据列表
	var comments = this.state.data; // 旧的列表中的数据
    comment.id = Date.now(); // 生成ID
    var newComments = comments.concat([comment]); // 合并所有的数据
    this.setState({data: newComments}); // 修改列表的数据

	// 发送给服务器进行保存,并刷新列表
//	  $.ajax({
//		  url: this.props.url,  // 读取父节点传递进来的参数
//		  dataType: 'json',
//		  type: 'POST',
//		  data: comment,
//		  success: function(data) {
//			this.setState({data: data}); // 刷新数据列表
//		  }.bind(this),
//		  error: function(xhr, status, err) {
//			console.error(this.props.url, status, err.toString());
//		  }.bind(this)
//		});
		this.setState({
			data: [
			  {"id": "1 new", "author": "author1", "text": "author1 comment text new"},
			  {"id": "2 new", "author": "author2", "text": "author2 comment text new"},
			  comment
		    ]
		});
  },
  getInitialState: function() { // 数据容器
  	console.log("父节点传递进来的参数,this.props.attr1 = " + this.props.attr1);
  	console.log("...getInitialState...");
    return {data: []};
  },
  componentDidMount: function() { // 在组件渲染后,React 会自动调用
  	  console.log("...componentDidMount...");
	  this.loadCommentsFromServer();
  },
  render: function() {
	console.log("...render...");
	console.log(this.state.data); // 要渲染的数据
    return (
      <div className="commentBox">
        <h1>Comments</h1>
		<CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

// this.props.attr1 // 父节点传递进来的参数
// this.setState({attr1: 'attr1_value'}); // 设置当前组件的数据,并会触发渲染视图
// this.state.attr1 // 读取当前组件的数据
// 方法componentDidMount,在组件渲染后,React 会自动调用

// 渲染组件到指定容器
ReactDOM.render(
  <CommentBox url="/api/comments" attr1="attr1_value" />,
  document.getElementById('content1')
);






版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

十分详细的React入门实例

学习React不是一蹴而就的事情,入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程。认真完成这个实例的...

React 入门实例教程

作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑...

react(二):用实例认识react

昨天在认识了什么是react之后,今天开始用代码来写一些demo,跟着慕课网的视频一起写demo发现运行不出来,找其原因是视频太老了,react已经更新换代了,摔!! 然后跟着阮一峰老师一起写12个...

React 入门实例教程(原作者: 阮一峰)

转载(http://www.ruanyifeng.com/blog/2015/03/react.html) 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React...

[转]React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主...

自己写的React小例子

用了之后发表下对React的看法,怎么说呢,我感觉还没有拼字符串爽,React适用于复杂的页面,唯一优点就是灵活度高,特点就是将html和js揉在一起,做简单的页面的话就是牛刀杀鸡的感觉。上代码: ...

React 入门实例教程

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领...

最简单的React和Redux整合的例子

react redux demo

React Router的一个完整示例

本博文提供一个单网页结构网页(SPA)使用React Router路由控制跳转的完整例子。 关于配置可以查看我之前的一篇博客:[一步一步进入React的世界(React+Webpack+ES6组合配置...

React 组件的API(组件实例)介绍

React 组件实例在渲染的时候(实例化)创建,这些实例在接下来渲染中会被重复使用。要调用组件上的API,首先需要获取对组件的引用。在组件方法内部可以通过this访问,在组件外唯一访问组件方法就是通过...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)