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






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

相关文章推荐

android service 后台执行定时任务

关于service 大家应都知道是android 四大组件之一,用来执行后台任务的。 如果还不太了解service 可以看看郭大神写的Android Service完全解析,关于服务你所需知道的一切,...

ELK 在 Spark 集群的应用

概述 大数据处理技术越来越火,云计算平台也如火如荼,二者犹如 IT 列车的两个车轮,相辅相成,高速发展。如果我们将大数据处理平台比作一个可能会得病的人的话,那么日志分析系统就是给病人诊断的医生。...

23种设计模式全解析

一、设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式...

java实现求最大回文长度

以每个位置为中心,向两端扩展,计算以每个位置为中心的最大的palindrome。 时间O(n^2),空间O(1);   public class Solution {     public s...

easyui table的onLoadSuccess: function(data),data是后台返回的json字符串

onLoadSuccess: function(data) { $("#suppliercount").html(data.total); }
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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