版权声明:本文为博主原创文章,未经博主允许不得转载。(github:KuanG97) https://blog.csdn.net/m0_37136491/article/details/81667887
【Javascript学习笔记】
目录
CommentForm新添加的内容传给爸爸CommentBox
理解
父组件通过一个函数,将之交给子组件提交的函数。让子组件告诉他有人添加了信息,并将对应信息放进该父函数传递给父组件。
代码
Box
...
handleCommentSubmit(comment){
console.log(comment);
}
render(){
...
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
...
Form
...
class CommentForm extends Component {
handleSubmit(event){
...
+ this.props.onCommentSubmit({author,text});//获得从父组件传来的方法并通过对象将值传回给父组件
}
...
效果
更新评论状态
代码
handleCommentSubmit(comment){
let comments = this.state.data,//copy旧数据
newComments = comments.concat(comment);//旧数据加一条新数据
this.setState({data:newComments});
}
效果
优化结构
取消App组件,将…Box直接渲染在root上
代码
root
//引入Component, Fragment,可将下面的简写,无需显示为React.xxx;
// 使用Fragment可避免渲染多了一个多余无用的div;切注意,最大容器有且只有一个
import React, { Component, Fragment} from 'react';
import CommentList from "./CommentList";
import CommentForm from "./CommentForm";
import $ from 'jquery';
class CommentBox extends Component{
constructor(props){
super(props);
this.state = {
data:[],
};
this.getComments();
setInterval(() => this.getComments(),5000);//每五秒更新请求
}
getComments(){
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:comments => {
this.setState({
data:comments
});
},
error:(xhr,status,error) => {
console.log(error);
}
});
}
handleCommentSubmit(comment){
let comments = this.state.data,//copy旧数据
newComments = comments.concat(comment);//旧数据加一条新数据
this.setState({data:newComments});
}
render(){
//多行渲染
return(
<Fragment>
<div className="comments">
<h1>评论</h1>
<hr />
</div>
<CommentList data={this.state.data} />
<CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)} />
</Fragment>
);
}
}
//理解导出CommentBox作为默认的东西
// export { CommentBox as default };
// 可简写成
export default CommentBox;
效果
优化样式——使用AntDesign
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~