React表单
起首,我们须要搭建一个React环境,用来完成结果:
先装置React,这里我用的并非最新版本的,所以须要挑选一个版本:
jspm install react@0.14.0-rcl
装置完成后,接着装置一个react-dom:
jspm install react-dom@0.14.0-rcl
semantic-ui,这个插件并非react必装的,这只是一个款式插件,装不装都能够,然则我这里图个轻易就装上了:
jspm install semantic-ui
在这里直接把semantic引入,所以须要装置一个css插件:
jspm install css
然后用browser-sync建立一个服务器,用来看管一些文件的变化:
browser-sync start --server --no-notify --files 'index.html. app/**/*.js'
用编辑器翻开文件当前地点的目次:
atom ./
这里我用了一个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,有人提交数据,就把这条数据放在这个要领内里实行一次;
末了我们就能够批评了:
在批评内里写上东西,然后点击提交,内容就会输出上去: