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(
<div className="comment-input">
<div className="comment-field">
<span className="comment-field-name">用户名:</span>
<div className="comment-field-input">
//上边是设置state值初始化,这里取值就用this.state.XXX,下边的评论内容同理
//这里加上onChange事件就是为了监听input的值是否发生改变,从而更新状态
<input type="text" value={this.state.username}
onChange={this.handleUsernameChange}
/>
</div>
</div>
<div className="comment-field">
<span className="comment-field-name">评论内容</span>
<div className="comment-field-input">
<textarea value={this.state.content}
onChange={this.handleContentChange}
/>
</div>
</div>
<div className="comment-field-button">
//给按钮添加点击事件
<button onClick={this.handleSubmit}>发布</button>
</div>
</div>
)
}
} //评论列表子组件
class CommentList extends Component{
//这里给组件加上defaultProps防止comments不传而报错的情况
static defaultProps={
comments:[]
}; render(){
return(
<div>
//遍历数组将值传递给Comment
{this.props.comments.map((comment,index)=>{
return <Comment comment={comment} key={index}/>
})}
</div>
)
}
} //评论列表中的每个单独项,这个组件被commentList所用
class Comment extends Component{
render(){
return(
//接收到CommentList传递过来的每一条数据然后将其渲染在页面上
<div className="comment">
<div className="comment-user">
<span className="comment-username">{this.props.comment.username}</span>
</div>
<p>{this.props.comment.content}</p>
</div>
)
}
} //评论功能整体用这个组件包起来,包括commentInput区域和commentList区域
class CommentApp extends Component{
//在这里初始化一个数组,来保存所有的评论数据,并且通过props把它传递给CommentList
constructor(){
super();
this.state={
comments:[]
}
} handleSubmitComment=(comment)=>{
//当用户发布评论的时候就把数据插入到comment中,然后通过setState将数据更新到页面上
this.state.comments.push(comment);
this.setState({
comments:this.state.comments
})
}; render(){
return(
<div className="wrapper">
//内部引入需要的子组件
//在这个父组件里给CommentInput子组件传入一个onSubmit的属性,这个属性是CommentApp的一个方法,这样CommentInput就可以调用this.props.onSubmit(...)将数据传递给CommentApp
<CommentInput onSubmit={this.handleSubmitComment}/>
<CommentList comments={this.state.comments}/>
</div>
)
}
} class Index extends Component{
render(){
return(
<div>
<CommentApp/>
</div>
)
}
} render(<Index/>,document.getElementById('root'));
body {
margin:;
padding:;
font-family: sans-serif;
background-color: #fbfbfb;
}
.wrapper {
width: 500px;
margin: 10px auto;
font-size: 14px;
background-color: #fff;
border: 1px solid #f1f1f1;
padding: 20px;
}
/* 评论框样式 */
.comment-input {
background-color: #fff;
border: 1px solid #f1f1f1;
padding: 20px;
margin-bottom: 10px;
}
.comment-field {
margin-bottom: 15px;
display: flex;
}
.comment-field .comment-field-name {
display: flex;
flex-basis: 100px;
font-size: 14px;
}
.comment-field .comment-field-input {
display: flex;
flex:;
}
.comment-field-input input,
.comment-field-input textarea {
border: 1px solid #e6e6e6;
border-radius: 3px;
padding: 5px;
outline: none;
font-size: 14px;
resize: none;
flex:;
}
.comment-field-input textarea {
height: 100px;
}
.comment-field-button {
display: flex;
justify-content: flex-end;
}
.comment-field-button button {
padding: 5px 10px;
width: 80px;
border: none;
border-radius: 3px;
background-color: #00a3cf;
color: #fff;
outline: none;
cursor: pointer;
}
.comment-field-button button:active {
background: #13c1f1;
}
/* 评论列表样式 */
.comment-list {
background-color: #fff;
border: 1px solid #f1f1f1;
padding: 20px;
}
/* 评论组件样式 */
.comment {
display: flex;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 10px;
padding-bottom: 10px;
min-height: 50px;
}
.comment .comment-user {
flex-shrink:;
}
.comment span {
color: #00a3cf;
font-style: italic;
}
.comment p {
margin:;
/*text-indent: 2em;*/
}
React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)的更多相关文章
- vue组件的基本使用,以及组件之间的基本传值方式
组件(页面上的每一个部分都是组件) 1.三部分:结构(template),样式(style),逻辑(script) 2.组件的作用:复用 3.模块包含组件 4.组件创建: 1.全局组件:Vue ...
- angular5 组件之间监听传值变化
http://www.cnblogs.com/SLchuck/p/5904000.html https://i.cnblogs.com/EditPosts.aspx?postid=7995179&am ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- vue--非父子组件之间的传值
一个项目都有一个根组件 App.vue 一个根组件下面可能会有多个自组件,例如:Hello.vue 和 Header.vue Hello.vue 和 Header.vue 就是兄弟组件,那么这两个兄弟 ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
- vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- React 受控组件和非受控组件
需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event. ...
- React学习之受控和非受控组件
受控组件是通过事件完成对元素value的控制,反之就是非受控组件. 1.受控组件的value通过onChange事件来改变,非受控不需要通过事件来改变value. 2.受控组件通过事件通过setSta ...
随机推荐
- cf 822B Crossword solving
B. Crossword solving time limit per test 1 second memory limit per test 256 megabytes input standard ...
- opengl绘制三维人物luweiqi
素材中有四个.bmp格式的纹理文件和一个.txt的模型参数文件 文件格式说明: 纹理文件数量 纹理文件1(字符串)//.bmp 纹理文件2(字符串) 纹理文件3(字符串) . . . 材质数量 amb ...
- 紫书 习题 10-17 UVa 11105 (筛法)
类似于素数筛的思想去做,不然暴力会超时而且还要判重 #include<cstdio> #include<cstring> #include<vector> #def ...
- 从头认识java-13.12 超类通配符
这一章节我们来讨论一下超类通配符. 1.什么是超类通配符 在前一章节我们提到一种通配符,是使用<? extends XXX>来实现的,导致了后面的一系列问题,如今我们引入还有一种通配符-- ...
- Virtual Reality: Immersive Yourself In Your 3D Mockup
ESI's Virtual Reality software solution IC.IDO is an exceedingly powerful immersive engineering solu ...
- 通过jQuery的Ajax方式来提交Form表单
通过jQuery的Ajax方式来提交Form表单 $.ajax({ url:ajaxCallUrl, type:"POST", cache:true, async:false, d ...
- modSecurity规则学习(五)——DDOS攻击检测
1.IP访问频率 SecAction phase:1,nolog,pass,setvar:IP.counter=+1 SecRule IP:UPDATE_RATE "@gt 10" ...
- js函数的属性和方法
js函数的属性和方法 前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解j ...
- c++笔试题:不使用第三个变量来交换俩个变量的数值
题目:将a 与 b的值互换. 通常我们的做法是(尤其是在学习阶段):定义一个新的变量,借助它完成交换.代码如下: int a,b; a; b: int t; t ...
- android webview 报 [ERROR:in_process_view_renderer.cc(189)] Failed to request GL process. Deadlock likely: 0 问题
工作中遇到 使用webview中加载含有audio标签的页面时提示[ERROR:in_process_view_renderer.cc(189)] Failed to request GL proce ...