A-A+

reactjs教程笔记

2016年09月12日 react 暂无评论 阅读 156 次

reactjs教程笔记

ps:http://reactjs.cn/react/docs/tutorial-zh-CN.html

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React Tutorial</title>
  <!-- Not present in the tutorial. Just for basic styling. -->
  <link rel="stylesheet" href="css/base.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var CommentList = React.createClass({
  render: function () {
    var key=1;
    var commentNodes = this.props.data.map(function (comment) {
      return(
        <Comment key ={key++} author={comment.author} id={comment.id}>
          {comment.text}
        </Comment>
      )
    });
    return (
      <div className="CommentList">
        {commentNodes}
      </div>
    )
  }
});

var CommentForm = React.createClass({
  getInitialState:function(){
    return({
      name:"",
      text:""
    })
  },
  handleNameChange:function(e){
    this.setState({name:e.target.value})
  },
  handleTextChange:function(e){
    this.setState({text:e.target.value})
  },
  handleSubmit:function(e){
    e.preventDefault();
    var name = this.state.name.trim();
    var text = this.state.text.trim();
    if(!text || !name){
      return;
    }
    // TODO: send request to the server
    this.props.onCommentSubmit({name:name,text:text});
    this.setState({
      name:"",
      text:""
    })
  },
  render: function () {
    return (
      <form className="commentForm" onSubmit ={this.handleSubmit}>
        <input type="text" onChange={this.handleNameChange} value={this.state.name}/>
        <input type="text" onChange={this.handleTextChange} value={this.state.text} />
        <input type="submit" value="Post" />
      </form>
    )
  }
});

var Comment = React.createClass({
  render: function () {
    return (
      <div className="Comment">
        <h2 className="CommentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    )
  }
});

var CommentBox = React.createClass({
  loadCommentsFromServer:function(){
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit:function(comment){
    var comments = this.state.data;
    comment.id = Date.now();
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
// TODO: submit to the server and refresh the list
    $.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) {
        debugger;
        this.setState({data: comments});
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState:function(){
   return {
     data:[]
   }
  },
  componentDidMount:function(){   //是一个当组件被渲染时被React自动调用的方法
   this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer,this.props.pollInterval)
  },
  render: function () {
    return (
      <div className="CommentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
      </div>
    )
  }
});

ReactDOM.render(
  <CommentBox url="comments.json" pollInterval={2000}/>, document.getElementById("content")
);



</script>
</body>
</html>

 

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录