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')
);






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

ReactJS 15.x - 例子一,HelloWorld

例子 // 使用的是JSX的语法 ReactDOM.render( Hel...
  • zhouzhiande
  • zhouzhiande
  • 2016年08月29日 01:32
  • 839

精通23种设计模式综合实例

第一讲:简单工厂模式  第二讲:工厂方法模式  第三讲:抽象工厂模式  第四讲:工厂模式在开发中的运用  第五讲:单例模式  第六讲:原型模式  第七讲:建造者模式  第八讲:装饰模式 ...
  • jianyue178826
  • jianyue178826
  • 2014年07月11日 14:41
  • 962

js数组和字符串间的综合应用

最近遇到CVTE的一道编程题为:编写一个函数fn(str),将驼峰命名的字符串转换为“aa_aa”,例如(HelloWorld转化为hello_world). 编写过程如下: ...
  • baidu_34449164
  • baidu_34449164
  • 2017年03月05日 22:52
  • 343

opencv学习笔记(十九)——图像滤波综合运用实例

#include cv::Mat Source_Image,BoxFilter_Image, MeanBlur_Image, GaussianBlur_Image, MedianBlur_Image,...
  • hx1298234467
  • hx1298234467
  • 2015年11月16日 20:00
  • 566

商品展示案例(SQLite数据库存储和ListView的使用)

1.创建程序 首先创建一个名为“DisplayProduct”的应用程序,设计用户交互界面,如下图所示: 其相应的布局文件(activity_main.xml)如下所示: xml version...
  • YeeCeeYee
  • YeeCeeYee
  • 2017年04月22日 10:30
  • 195

【CSS+DIV】(2)——CSS与XML、Ajax的综合应用

背景:上一篇文章《【CSS+DIV】(1)——滤镜的应用》中的高级滤镜介绍了CSS与JavaScript的综合应用,下面来介绍CSS与XML、Ajax的综合应用。 一、CSS与XML 1、例子:X...
  • u013043341
  • u013043341
  • 2016年01月02日 19:47
  • 673

SQLite数据库---ListView控件之商品展示案例

开发一个购物车,需要将购物车中的商品以陈列的形式展示,并且还需要对购物车的商品进行增删改查操作。要实现这些功能就需要使用ListView和SQLite数据库。接下来通过一个“商品展示”案例实现在界面上...
  • winnie_hu
  • winnie_hu
  • 2017年04月20日 07:32
  • 658

一个简单的 SWING 例子

简单的例子 JFrame是GUI中的容器  JButton是最常见的组件- 按钮  注意:f.setVisible(true); 会对所有的组件进行渲染,所以一定要放在最后面 package ...
  • wo_shi_LTB
  • wo_shi_LTB
  • 2018年01月10日 23:04
  • 63

Hibernate综合运用内部留言本(二)

一 理解需求 二 根据需求文档,画出程序框架图 三 创建一个web项目 四 创建web层。 1 引入struts 2 web层开发 2.1 login.jsp ...
  • chengqiuming
  • chengqiuming
  • 2017年12月01日 19:08
  • 44

路由器和交换机的综合实验(1)

1.     按拓扑图所示,完成各网络设备的基本配置。 2.     在四台交换机上配置MSTP协议,并将VLAN10,VLAN30映射到实例1,S3750-1为实例1的根,将VLAN20,VLAN...
  • guofengdidai
  • guofengdidai
  • 2013年06月22日 21:56
  • 3778
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJS 15.x - 例子二,综合运用
举报原因:
原因补充:

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