zoukankan      html  css  js  c++  java
  • react

    'use strict';

    import 'semantic-ui/semantic.min.css!';

    import React from 'react';

    import ReactDom from 'react-dom';

    import CommentBox from './Comment/CommentBox';

    import $ from 'jquery';

    ReactDOM.render(

      <CommentBox url="app/comments.json" />

      document.getElementById('app')

    );

    状态属于组件私有的东西

    this.state

    this.setState();

    constructor(props) {

      super(props);

      this.state = {

        data:[]

      ;

      this.getComments();

      setInterval() => this.getComment,500;

    }

    handleCommnetSubmit(comment) {

      let comments = this.state.dta,

        newComments = comments.concat(comment);

      this.setState({data:newComment});

    }

    getComments() {

    $.ajx({

        url:this.props.url,

        dataType:'json',

        cache: false,

        success:comments => {

          this.setState(data:comments);

        },

        error:(xhr,status, error) =>{

        }

      })

    }

      render() {

        <div className="ui comments">

          <h1>评论</h1>

          <div className="ui divider">

            <CommentList data={this.state.data} />

            <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>

          </div>

        </div>

      }

    }

    jspm install jquery

    handleSubmit(event) {

      let author = this.refs.author.value,

         text = this.refs.text.value;

      this.props.onCommentSubmit({author,text,date:'刚刚'});

    }

    <form className="ui replay form" onSubmit={this.handleSubmit.bind(this)}>

    <input type="text" ref="author" />

    <textarea ref="text">

    上交给爸爸

    ninghao-react

    jspm  SystemJs   Babel 编译  JSX->JavaScript

    jspm instll react@0.14-rc1

    jspm install react-dom@0.14.0-rc1

    jspm install sematic-ui

    jspm install css

    browser-sync start --server --no-notify --files 'index.html, app/**/*.js'

    atom ./

  • 相关阅读:
    捉BUG记(To Catch a Bug)
    发布一个简单的knockout-easyui绑定库
    笔记:Hyper-V上Centos 6.5分辨率调整问题解决笔记
    Asp.net中HttpRequest.Params与Reques.Item之异同
    Oracle必须死之奇怪的ORA-06502错误
    centos7 搭建bitcoin/usdt 节点服务
    webpack安装配置
    centos7 rsyslog
    nginx+fpm 开机自启
    centos7下 PHP添加pdo_myql扩展
  • 原文地址:https://www.cnblogs.com/yushunwu/p/5156241.html
Copyright © 2011-2022 走看看