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+Redux 的前端开发流程

前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an...

map容器的使用 加上一个map与set综合运用的例子

string的函数赋值可以直接赋值。 #include #include #include using namespace std; struct Student{ string n...

Cocos2d-X中Menu的综合运用

今天将以前写的代码和项目集成到了一个菜单中,可以通过菜单切换到以前做的项目 程序的工程目录 主要代码分析: LessonMenu.h中实现创建菜单,遍历菜单通过菜单切换到各个项目 ...

cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)

ufolr原创,转载请注明: 转载自ufolr的博客 原文连接:http://blog.csdn.net/ufolr/article/details/7624851      ...
  • ufolr
  • ufolr
  • 2012年07月22日 23:19
  • 12142

Cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)

最近项目中需要一个落叶的效果,本来想用粒子特效来实现,但是几经调试,虽然调出了落叶的效果,但是并不是十分理想,最大的不足就是落叶是平面的,没有立体感,虽然把落叶做小之后却是立体感的感觉会有所缓解,但总...

cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)

cocos2d-x学习笔记(五)仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用) 分类: C++学习 cocos2d-x2012-07-22 23:19 6775人阅读 评论...
  • kaka626
  • kaka626
  • 2015年01月19日 11:14
  • 698

java与jxl、log4j综合运用例子

  • 2011年01月10日 00:13
  • 1.07MB
  • 下载

运用X11 API的小例子

原文地址::http://blog.csdn.net/linuxheik/article/details/7598105 相关文章 1、X11: Linux跨网络运行XWindow程序----ht...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJS 15.x - 例子二,综合运用
举报原因:
原因补充:

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