【ReactJs学习笔记】【子组件将数据传给父组件 && 模拟发送更新给服务端】

【Javascript学习笔记】

目录

CommentForm新添加的内容传给爸爸CommentBox

理解

父组件通过一个函数，将之交给子组件提交的函数。让子组件告诉他有人添加了信息，并将对应信息放进该父函数传递给父组件。

代码

Box

...

    handleCommentSubmit(comment){
        console.log(comment);
    }

    render(){

...

                

...

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(  
"comments"> 
评论
 
 
 this.state.data} /> this.handleCommentSubmit.bind(this)} />  ); } } //理解导出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~