react

Posted 2020-06-08

‘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 [email protected]

jspm install [email protected]

jspm install sematic-ui

jspm install css

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

atom ./