React表單
首先，我們需要搭建一個React環境，用來實現效果：
先安裝React，這裡我用的並不是最新版本的，所以需要選擇一個版本：
jspm install react@0.14.0-rcl安裝完成後，接著安裝一個react-dom：
jspm install react-dom@0.14.0-rclsemantic-ui，這個外掛並不是react必裝的，這只是一個樣式外掛，裝不裝都可以，但是我這裡圖個方便就裝上了：
jspm install semantic-ui在這裡直接把semantic引入，所以需要安裝一個css外掛：
jspm install css然後用browser-sync建立一個伺服器，用來監視一些檔案的變化：
browser-sync start --server --no-notify --files 'index.html. app/**/*.js' 這裡我用了一個System來匯入app底下的mian.js：
開啟main.js，在裡面把css樣式引進來：
"use strict";
import 'semantic-ui/semantic.min.js!';下面是一個簡單的排版，來看一下css樣式：
<div class="ui container" style="padding:30px">
<div id="app"></div>
</div>下面我們就開始正式的編寫程式了：
建立一個comment檔案，在檔案下面建立一個CommentBox.js：
'use strice';
import React from 'react'; //匯入react；
class CommentBox extends React.Component{
constructor(props){
spuer(props);
this.state = {data:[]};
this.getComments();
// setInterval(() => this.getComments(),5000);
}
handleCommentSubmit(comment){
let comments = this.state.data,
newComments = comments.concat(comment);
this.setState({data:newComments});
}
getComments(){
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:comments => {
this.set({data:comments});
},
error:(xhr,status,error) => {
console.log(error);
}
});
}
render(){
return (
<div className = "ui comments">
<h1>評論</h1>
<div className = "ui divider"></div>
<CommentList data={this.states.data}/>
<CommentForm onCommentSumit = {this.handleCommentSubmit.bind(this)}/>
</div>
);
}
}
export{CommentBox as default}; //作為一個預設的東西匯出；在網頁中顯示頁面需要在main.js裡面匯入一些檔案：
- html：
<div class="ui container" style="padding:30px">
<div id="app"></div>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.impore('app/main');
</script>
- main.js：
'use strict'
import 'semantic-ui/semantic.min.css!';
import React from 'react';
import ReactDOM from 'react-dom';
import CommentBox from './comment/CommentBox';
ReactDOM.render(
<CommentBox url="comments.json" />,
document.getElementById("app")
);接下來我們需要在定義兩個元件，來把它們連在一起：
評論列表的元件（CommentList.js）：
'use strict';
import React from 'react';
import Comment from './Comment';
class CommentList extends React.Component{
render(){
let commentNodes = this.props.data.map(comment => {
return(
<Comment author={comment.author} data={comment.data}>
{comment.text}
</Comment>
);
})
return(
<div>
{commentNodes}
</div>
);
}
}
export {CommentList as default};評論表單的元件（CommentForm.js）：
'use strict';
import React from 'react';
class CommentForm extends React.Component{
handleSubmit(event){
event.preventDefult();
console.log("提交表單。。。。");
let author = this.refs.author.value,
text = this.refs.txte.value;
console.log(author,text);
this.props.onCommentSubmit({author,text,date:"剛剛"});
}
render(){
return(
<from className = "ui reply form" onSubmit = {this.handleSubmit.bind(this)}>
<div className="field">
<input type="text" placeholder="姓名" ref="author"/>
</div>
<div className="field">
<textarea placeholder="評論" ref="text"></textarea>
</div>
<button type="submit" className="ui blue button">
新增評論
</button>
</from>
);
}
}
export {CommentForm as default};然後定義一個Cmment.js的一個元件，放到CommentList.js裡面，然後在從CommentList.js裡面傳遞一些資料到Cmment.js裡面：
Cmment.js：
'use strict'
import React from 'react';
class Comment extends React.Comment{
render (){
return (
<div className="comment">
<div className="content">
<span className="author">{this.props.author}</span>
<div className="metadata">
<span className="date">{this.props.date}</span>
</div>
<div className="text">{this.props.children}</div>
</div>
</div>
);
}
}
export {Comment as default};CommentList.js：
'use strict';
import React from 'react';
import Comment from './Comment'; //引進Comment.js；
class CommentList extends React.Component{
render(){
let commentNodes = this.props.data.map(comment => {
return(
<Comment author={comment.author} data={comment.data}>
{comment.text}
</Comment>
);
})
return(
<div>
{commentNodes}
</div>
);
}
}
export {CommentList as default};註釋：這事瀏覽器會顯示一些內容，這些內容就是從render這個方法裡面傳遞給CommentBox.js這個元件，然後再從CommentBox.js傳遞給CommentList.js，在CommentList.js這個元件裡面迴圈的處理了一下每一條評論的內容，每一次都會用一次Comment這個元件，然後把評論的內容傳遞給Comment；
從服務端請求資料：
建立一個Comments.json檔案：
[
{"author":"姜姜","date":"5 分鐘前","text":"天氣不錯啊！！！"},
{"author":"筱妍","date":"3 分鐘前","text":"出去玩啊！！！"},
{"author":"吳建","date":"1 分鐘前","text":"去哪玩啊！！！"}
]從服務端請求資料：
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:comments => {
this.set({data:comments});
},
error:(xhr,status,error) => {
console.log(error);
}
});為了頁面的資料和服務端的保持聯絡，設定每隔五秒向服務端發生一次請求：
constructor(props){
spuer(props);
this.state = {data:[]};
this.getComments();
setInterval(() => this.getComments(),5000);
}
getComments(){
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:comments => {
this.set({data:comments});
},
error:(xhr,status,error) => {
console.log(error);
}
});
}在CommentForm.js幫頂一下事件：
class CommentForm extends React.Component{
handleSubmit(event){
event.preventDefult();
console.log("提交表單。。。。");
let author = this.refs.author.value,
text = this.refs.txte.value;
console.log(author,text);
this.props.onCommentSubmit({author,text,date:"剛剛"});
}
render(){
return(
<from className = "ui reply form" onSubmit = {this.handleSubmit.bind(this)}>
<div className="field">
<input type="text" placeholder="姓名" ref="author"/>
</div>
<div className="field">
<textarea placeholder="評論" ref="text"></textarea>
</div>
<button type="submit" className="ui blue button">
新增評論
</button>
</from>
);
}
}接下來我們可以把寫的內容輸出到控制檯上：
把提交的內容交給服務端處理：
在CommentBox.js上面新增一個方法：
handleCommentSubmit(comment){
let comments = this.state.data,
newComments = comments.concat(comment);
this.setState({data:newComments});
}
//這個方法就是告訴CommentBox.js，有人提交資料，就把這條資料放在這個方法裡面執行一次；