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

【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~

---