React学习笔记(二) | 受控组件
React组件
目标
- 能够知道受控组件是什么
- 能够写出受控组件
- 了解非受控组件
表单处理
受控组件(★★★)
- HTML中的表单元素是可输入的,也就是有自己的可变状态
- 而React中可变状态通常保存在state中,并且只能通过
setState()
方法来修改 - React讲state与表单元素值value绑定在一起,有state的值来控制表单元素的值
- 受控组件:值受到react控制的表单元素
使用步骤
- 在state中添加一个状态,作为表单元素的value值
- 给表单元素绑定change事件,将表单元素的值设置为state的值
示例demo
class App extends React.Component {constructor(){super()this.inputChange = this.inputChange.bind(this)}state = {txt : ''}inputChange(e){this.setState({txt: e.target.value})}render(){console.log(this.state);return (<div>{/* 把state的值设置给输入框的value,绑定change事件,这样用户在输入内容的时候调用相应函数,在函数里面把当前设置的值赋值给state,从而达到数据的统一 */}<input type="text" value={this.state.txt} onChange={this.inputChange}/></div>)}
}
ReactDOM.render(<App />,document.getElementById('root'))
多表单元素优化
- 问题:每个表单元素都有一个单独的事件处理函数,这样太繁琐
- 优化:使用一个事件处理程序同时处理多个表单元素
步骤
- 给表单元素添加name属性(用来区分是哪一个表单),名称与state相同(用来更新数据的)
- 根据表单内容来获取对应值
- 在change事件处理程序中通过 [name] 来修改对应的state
示例demo
inputChange(e){let target = e.target;let value = target.type == 'checkbox' ? target.checked : target.value;this.setState({[e.target.name]: value})
}
<input type="text" value={this.state.txt} name="txt" onChange={this.inputChange}/>
<input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.inputChange}/>
非受控组件 (了解)
- 说明:借助于ref,使用元素DOM方式获取表单元素值
- ref的作用:获取DOM或者组件
使用步骤
- 调用
React.createRef()
方法创建ref对象 - 将创建好的 ref 对象添加到文本框中
- 通过ref对象获取到文本框的值
class App extends React.Component {constructor(){super()//创建 refthis.txtRef = React.createRef()}// 获取文本框的值getTxt =() => {console.log(this.txtRef.current.value)}render(){return (<div><input type ="text" ref={this.txtRef} /><button onClick ={this.getTxt}>获取值</button></div>)}
}
React组件综合案例(★★★)
需求分析
- 渲染评论列表(列表渲染)
- 没有评论数据时渲染:暂无评论(条件渲染)
- 获取评论信息,包括评论人和评论内容(受控组件)
- 发表评论,更新评论列表(
setState()
)
搭建评论列表的模板
- 结构
import React from 'react'
import ReactDOM from 'react-dom'/* 评论列表案例comments: [{ id: 1, name: 'jack', content: '沙发!!!' },{ id: 2, name: 'rose', content: '板凳~' },{ id: 3, name: 'tom', content: '楼主好人' }]
*/import './index.css'class App extends React.Component {render() {return (<div className="app"><div><input className="user" type="text" placeholder="请输入评论人" /><br /><textareaclassName="content"cols="30"rows="10"placeholder="请输入评论内容"/><br /><button>发表评论</button></div><div className="no-comment">暂无评论,快去评论吧~</div><ul><li><h3>评论人:jack</h3><p>评论内容:沙发!!!</p></li></ul></div>)}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
- 样式
.app {width: 300px;padding: 10px;border: 1px solid #999;
}.user {width: 100%;box-sizing: border-box;margin-bottom: 10px;
}.content {width: 100%;box-sizing: border-box;margin-bottom: 10px;
}.no-comment {text-align: center;margin-top: 30px;
}
渲染评论列表
- 在state中初始化评论列表数据
state = {comments: [{ id: 1, name: 'jack', content: '沙发!!!' },{ id: 2, name: 'rose', content: '板凳~' },{ id: 3, name: 'tom', content: '楼主好人' }]}
- 使用数组的map方法遍历state中的列表数据
- 给每一个被遍历的li元素添加key属性
- 在render方法里的ul节点下嵌入表达式
{this.state.comments.map(item => {return (<li key={item.id}><h3>{item.name}</h3><p>{item.content}</p></li>)})
}
渲染暂无评论
判断列表数据的长度是否为0
如果为0,则渲染暂无评论
如果不为0,那么渲染列表数据
在jsx中大量写逻辑会导致很臃肿,所以我们可以把条件渲染的逻辑抽取成一个函数
/*** 条件渲染,这里抽取出来了,这样在结构中不会很混乱*/
renderList(){if (this.state.comments.length === 0) {return (<div className="no-comment">暂无评论,快去评论吧~</div>)} else {return (<ul> {this.state.comments.map(item => {return (<li key={item.id}><h3>{item.name}</h3><p>{item.content}</p></li>)})}</ul>)}
}
- 在render的return方法里面调用这个函数即可
render() {return (<div>...{/* 通过条件渲染来判断是否显示暂无评论 */}{this.renderList()}</div>)
}
获取评论信息
- 通过受控组件来获取内容
- 初始化用户名和用户内容的state
userName: '',
userContent: ''
- 在结构中,把表单元素的value与state进行绑定,还需要绑定name属性和onChange属性
<input className="user" type="text" placeholder="请输入评论人" value={this.state.userName} name="userName" onChange={this.handleForm}/>
<br />
<textareaclassName="content"cols="30"rows="10"placeholder="请输入评论内容"value={this.state.userContent}name="userContent"onChange={this.handleForm}
/>
- 在
handleFrom
函数中利用setState
来让数据保持一致
handleForm = (e) => {this.setState({[e.target.name] : e.target.value})}
发表评论
- 给按钮绑定事件
- 在事件处理程序中,通过state获取评论信息
- 将评论信息添加到state中,利用setState来更新页面
- 添加评论前需要判断用户是否输入内容
- 添加评论后,需要情况文本框用户输入的值
handleClick = (e) => {// 拿到用户输入的内容let {userName,userContent} = this.stateif(userName.trim()==='' || userContent.trim() === ''){alert('请输入内容')return}// 利用数组拓展运算符来进行数据的拼接,把用户输入的存放在数组的第一个位置let newComments = [{id: this.state.comments.length+1,name: userName,content: userContent},...this.state.comments]this.setState({comments: newComments,userName:'',userContent: ''})
}
React组件进阶
目标
- 能够使用props接收数据
- 能够实现父子组件之间的通讯
- 能够实现兄弟组件之间的通讯
- 能够给组件添加props校验
组件通讯介绍
组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通,这个过程就是组件通讯
组件的props(★★★)
基本使用
- 组件时封闭的,要接受外部数据应该通过props来实现
- props的作用:接收传递给组件的数据
- 传递数据:给组件标签添加属性
接收数据:函数组件通过 参数 props接收数据,类组件通过 this.props接收数据
函数组件获取
类组件获取
特点
- 可以给组件传递任意类型的数据
- props是只读属性,不能对值进行修改
- 注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props,其他的地方是可以拿到的
组件通讯的三种方式(★★★)
父组件传递数据给子组件
- 父组件提供要传递的state数据
- 给子组件标签添加属性,值为state中的数据
- 子组件中通过props接收父组件中传递的数据
子组件传递数据给父组件
- 利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数
- 父组件提供一个回调函数,用来接收数据
- 将该函数作为属性的值,传递给子组件
- 子组件通过props调用回调函数
兄弟组件传递
- 将共享状态(数据)提升到最近的公共父组件中,由公共父组件管理这个状态
- 这个称为状态提升
- 公共父组件职责:1. 提供共享状态 2.提供操作共享状态的方法
- 要通讯的子组件只需要通过props接收状态或操作状态的方法
示例demo
- 定义布局结构,一个Counter里面包含两个子组件,一个是计数器的提示,一个是按钮
class Counter extends React.Component {render() {return (<div><Child1 /><Child2 /></div>)}
}
class Child1 extends React.Component {render() {return (<h1>计数器:</h1>)}
}
class Child2 extends React.Component {render() {return (<button>+1</button>)}
}
- 在父组件里定义共享状态,把这个状态传递给第一个子组件
class Counter extends React.Component {// 提供共享的状态state = {count: 0}render() {return (<div>{/* 把状态提供给第一个子组件 */}<Child1 count={this.state.count}/><Child2 /></div>)}
}
- 在第一个子组件里面就能通过props获取到
class Child1 extends React.Component {render() {return (<h1>计数器:{this.props.count}</h1>)}
}
- 在父组件中提供共享方法,通过属性传递给第二个子组件,方便第二个子组件来进行调用
// 提供共享方法onIncrement = (res) => {// 只要第二个子组件调用了这个函数,就会执行里面代码this.setState({count: this.state.count + res})}render() {return (<div>...{/* 把共享方法提供给第二个子组件 */}<Child2 onIncrement={this.onIncrement} /></div>)}
- 在第二个子组件里面通过props来获取到对应函数,然后进行调用
class Child2 extends React.Component {handleClick = () => {// 这里一旦调用,就会执行父组件里面 onIncrement函数this.props.onIncrement(2)}render() {return (<button onClick={this.handleClick}>+</button>)}
}
Context(★★★)
如果出现层级比较多的情况下(例如:爷爷传递数据给孙子),我们会使用Context来进行传递
作用: 跨组件传递数据
使用步骤
- 调用
React.createContext()
创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件
- 使用Provider 组件作为父节点
- 设置value属性,表示要传递的数据
- 哪一层想要接收数据,就用Consumer进行包裹,在里面回调函数中的参数就是传递过来的值
小结
- 如果两个组件相隔层级比较多,可以使用Context实现组件通讯
- Context提供了两个组件:Provider 和 Consumer
- Provider组件: 用来提供数据
- Consumer组件: 用来消费数据
props进阶
children属性
- children属性: 表示组件标签的子节点,当组件标签有子节点时,props就会有该属性
- children属性与普通的props一样,值可以使任意值(文本、react元素、组件、甚至是函数)
props校验(★★★)
- 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
- 如果传入的数据不对,可能会导致报错
- 关键问题:组件的使用者不知道需要传递什么样的数据
- props校验:允许在创建组件的时候,指定props的类型、格式等
- 作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性
使用步骤
- 安装包
prop-types (yarn add prop-types | npm i props-types)
- 导入prop-types 包
- 使用
组件名.propTypes={}
来给组件的props添加校验规则 - 校验规则通过PropTypes对象来指定
常见的约束规则
- 创建的类型:
array、bool、func、number、object、string
- React元素类型:
element
- 必填项:
isRequired
- 特定结构的对象:
shape({})
- 更多的约束规则
props的默认值
- 场景:分页组件 -> 每页显示条数
React学习笔记(二) | 受控组件相关推荐
- React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
- React学习笔记二:实现一个数字时钟
<!DOCTYPE html> <html lang="zhm"><head><meta charset="UTF-8" ...
- React学习笔记二——react-router
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一个关于react-router的demo,因为不喜欢下载太多的依赖包,所以就直接引得js,解析会比较慢一些. 首先先 ...
- React学习笔记二 通过柯里化函数实现带参数的事件绑定
class Login extends React.Component {state = {username: '',password: ''}saveFormData = (type) => ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件绑定 组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
最新文章
- 独家 | 熵–数据科学初学者必知的关键概念(附链接)
- DeepFake 新高度:一阶运动模型让“万物皆可动”
- Asp.Net读写XML简单方法
- java 格式化 布尔型_这么久才知道Java中的format很强大!
- 作者:王倩(1983-),女,上海计算机软件技术开发中心工程师。
- Centos7 防火墙开启端口
- 【模板】链式前向星+spfa
- 优点 spark_分布式计算引擎之星——Spark
- 一个Layered Window从支持多屏到高DPI开始,遭遇的性能雪崩及其优化历程
- [BZOJ1864][CODEVS2462]三色二叉树
- win7快速启动栏计算机,win7快速启动栏,教您Win7如何添加快速启动栏
- 贪心 :PIPI渡江
- 安装黑苹果时提示未能与服务器,安装黑苹果遇到的问题与解决记录
- cJSON 使用详解
- Serializers - Django REST framework
- 首席新媒体黎想教程:活动形式和用户吸引逻辑!
- 做一个有流量的标题党
- 哪些场景下使用MongoDB
- matlab清除所有图形窗口,matlab图形操作基础
- iContact AE 新增功能
热门文章
- 开源软件漏洞升级步骤
- outlook邮箱邮件与企业邮箱同步(outlook本地文件夹邮件,web邮箱里没有)
- java 获取est时间_java – 在EST时区获取XMLGregorianCalendar日期
- 四方光电扬尘传感器PM3006助力打赢蓝天保卫战
- 挂起和阻塞区别?sleep()和wait()的区别?
- 如何开发app软件?程序员揭秘你还没听过的1种方法
- 2012年世界500强排行榜(企业名单)
- deepin配置ssh访问
- M001: MongoDB Basics Chapter 3: Deeper Dive on the MongoDB Query Language学习记录
- ZOJ1005 Jugs