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

最新推荐文章于 2024-01-21 10:58:32 发布

_jan_

最新推荐文章于 2024-01-21 10:58:32 发布

阅读量1.2k

点赞数

分类专栏： SeaJS/RequireJS/VueJS/ReactJS 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/zhouzhiande/article/details/52349344

版权

SeaJS/RequireJS/VueJS/ReactJS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

组件化、模块化
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')
);

_jan_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactJS 15.x - 例子二，综合运用

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

扫一扫