React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)...

本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习。

import React,{Component} from 'react';
import {render} from 'react-dom';
import './comprehensive.css'

/*
 * 一个重要问题知识点:
 *可以看到这个CommentInput组件和CommentList组件都是两个子组件,但是开始是两个毫不相干的子组件,我们想让他们建立连接,但是同为两个子级组件之间是没法直接传值的,这时候他们的父级组件CommentApp就起到了一个桥梁的作用
 * ->当用户点击发布按钮的时候我们将CommentInput中的state当中最新的评论数据传递给父级组件CommentApp,然后从父级组件CommentApp传给子组件CommentList进行渲染
 *
 * 问题来了:那么子级CommentInput怎么向父级CommentApp传值呢?
 *   父组件CommentApp只需要通过props给子组件CommentInput传入一个回调函数,当用户点击发布按钮的时候CommentInput调用props中的回调函数并将state传入该函数即可
 */

//这个是commentInput子组件,负责用户输入的区域
class CommentInput extends Component{
    //这里初始化一个state值来保存用户名(username)值和评论内容(content)
    //但是自行设置一个初始化的参数之后就不能从界面中输入了,因为输入控件被设置成了固定值,永远以设置的为准。
    constructor(){
        super();
        this.state={
            username:'',
            content:''
        }
    }

    //为了解决被控问题,所以就要setState一下,监听输入框中的onChange事件,获取到用户输入的内容之后用setState更新一下状态,这样input里边的内容才会发生改变。下同
    handleUsernameChange=(event)=>{
        this.setState({
            //这里我们通过event.target.value获取到输入框中的内容,并通过setState把它设置到state.username中,这样内容就会更新,输入就再没问题了。下同
            username:event.target.value
        })
    };

    handleContentChange=(event)=>{
        this.setState({
            content:event.target.value
        })
    };

    handleSubmit=()=>{
        //这个方法判断props中是否传入了onSubmit属性,有的话就用该函数,并把用户输入的数据都传给该函数
        if(this.props.onSubmit){
            const {username,content}=this.state;
            this.props.onSubmit({
                username,content
            })
        }
        //增加用户体验,提交后清空原来的值
        this.setState({
            username:'',
            content:''
        })
    };

    render(){
        return(
            
用户名:
//上边是设置state值初始化,这里取值就用this.state.XXX,下边的评论内容同理 //这里加上onChange事件就是为了监听input的值是否发生改变,从而更新状态 this.state.username} onChange={this.handleUsernameChange} />
评论内容