位置: IT常识 - 正文

猿创征文|【React 三】组件实例的三大属性(state、props、refs)(关于猿猴的作文)

编辑:rootadmin
猿创征文|【React 三】组件实例的三大属性(state、props、refs)

目录

一、 State

1.概念

2.State的简单用法3. JS绑定事件 4.react 绑定事件

5.react this指向问题

6.修改state值

7.代码简写

二、props

1.概念

2.传参的基础方法、运算符传参

三、refs

定义

字符串形式的ref、回调函数下ref、createRef 创建ref容器


一、 State1.概念

推荐整理分享猿创征文|【React 三】组件实例的三大属性(state、props、refs)(关于猿猴的作文),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:猿文教育科技有限公司怎么样,关于猿猴的作文,猿类的作文,猿文教育科技有限公司怎么样,猿人作文,猿类的作文,猿类的作文,猿人作文,内容如对您有帮助,希望把文章链接给更多的朋友!

概念:state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合),组件被称为`状态机`,通过更新组件的state来更新对应的页面显示(重新渲染组件),有state称为复杂组件。

2.State的简单用法

实现简单的切换效果,这里的效果是一种覆盖

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn{ width: 100px; height: 40px; background-color: red; } .on{ background-color: gray; } </style></head><body> <div id="root"></div> <!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script> <script type="text/babel"> class IsLike extends React.Component { state = { flag:true } //箭头函数this指向上下文,静态不可改变 changeFlag=()=>{ this.setState({flag:!this.state.flag}) } render() { const {flag}=this.state return ( <div> <button className={flag?'btn':'btn on'} onClick={this.changeFlag}>{flag?'喜欢':'不喜欢'}</button> </div> ) } } ReactDOM.render(<IsLike/>,document.getElementById('root')) </script></body></html>

3. JS绑定事件let btn = document.getElementById('btn');btn.addEventListener('click',function(){   alert('按钮被点击了!');})btn.onclick = function(){ alert('按钮被点击了!');}function demo(){alert('按钮被点击了');} 4.react 绑定事件render(){return <a href='javascript:;' onClick={demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>}

说明:

·onclick 变为 onClick。

·{函数名}返回值给click,加()就会直接调用。

5.react this指向问题demo(){      console.log(this);//undefinedconsole.log('事件被点击了');}

举例说明:

class Person{     constructor(name,age) {                 this.name = name; this.age = age;     }say(){ console.log(this); } }const p1 = new Person('张三',18);p1.say();//p1为实例对象const p2 = p1.say;p2();//undefined 类采取是严格模式6.修改state值class MyClass extends React.Component{constructor(props) {      super(props);   this.state = {isflag:true};   this.demo = this.demo.bind(this);}render(){return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>}demo(){    this.setState({isflag:!this.state.isflag})}} ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明:

猿创征文|【React 三】组件实例的三大属性(state、props、refs)(关于猿猴的作文)

bind会生成一个新的方法 并传对象 改变this的指向必须使用setState 修改才有效,修改内容为合并。有值得修改没有的不动

7.代码简写class MyClass extends React.Component{state = {isflag:true}render(){return <a href='javascript:;' onClick={this.demo} className='btn'>{this.state.isflag?'已关注':'取消关注'}</a>} demo = () => {    this.setState({isflag:!this.state.isflag}) }}ReactDOM.render(<MyClass/>,document.getElementById('root'));

说明:

类中的属性直接赋值,省去构造函数。

自定义方法—用赋值语句的形式+箭头函数

二、props1.概念

每个组件对象都会有props(properties的简写)属性。

组件标签的所有属性都保存在props中。

props 是不可变的,只能通过 props 来传递数据。

2.传参的基础方法、运算符传参

其中先通过let创建了一个对象,在通过三点运算符,来遍历得到,对象里面的值

在通过对象结构得到props中的realname和age,GetName是Person组件的子组件,在Person中传值给GetName,GetName通过props接收

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="root"></div> <!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script> <script type="text/babel"> class GetName extends React.Component { render() { return ( <div>姓名:{this.props.realname}</div> ); } } class Person extends React.Component { render() { const {realname,age} = this.props return ( <div> <GetName realname={this.props.realname}/> <span>年龄:{age}</span> </div> ); } } let p1 = {realname:'张三',age:19} ReactDOM.render(<Person {...p1}/>,document.getElementById('root')) </script></body></html>三、refs定义

组件内的标签可以定义ref来标识自己。

字符串形式的ref、回调函数下ref、createRef 创建ref容器

字符串形势,是直接通过ref绑定值,通过在点击事件中获取ref的值,ref如同把整个input表单传了过来,在获取值的时候需要点一下value来获取的是input表单的内容

通过ref中的箭头函数,绑定了值,在方法中直接获取即可,穿过来时,由于react的编译不需要写target但是,还是需要点出value

通过createRef来创建两个容器,通过对象的形势与ref绑定,直接就可以在方法中得到值,不过这里要注意,打印还是获取的时候在点value之前点一个current,如this.realname.current.value

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="root"></div> <!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script> <script type="text/babel"> class Person extends React.Component { //createRef 创建ref容器 realname = React.createRef() age = React.createRef() ShowInfo=()=>{ //字符串 // const {realname,age}=this.refs // console.log(`姓名:${realname.value}年龄:${age.value}`); //回调函数 // let realname = this.realname.value // let age = this.age.value // console.log(`姓名:${realname}年龄:${age}`); //类绑定 console.log(this.realname.current.value); console.log(this.age.current.value); } render() { return ( /*字符串形势 <div> <p><input type="text" placeholder="请输入姓名" ref='realname'/></p> <p><input type="text" placeholder="年龄" ref='age'/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> */ //回调函数 // <div> // <p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p> // <p><input type="text" placeholder="年龄" ref={e=>this.age=e}/></p> // <p><button onClick={this.ShowInfo}>提交</button></p> // </div> //createRef 创建ref容器 <div> <p><input type="text" placeholder="请输入姓名" ref={this.realname}/></p> <p><input type="text" placeholder="年龄" ref={this.age}/></p> <p><button onClick={this.ShowInfo}>提交</button></p> </div> ); } } ReactDOM.render(<Person/>,document.getElementById('root')) </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/299791.html 转载请保留说明!

上一篇:大数据框架之Hadoop:MapReduce(三)MapReduce框架原理——OutputFormat数据输出(大数据相关框架)

下一篇:chatGPT之Python API启用上下文管理

  • 华为手机下载任务在哪查看(华为手机下载任何软件让绑了手机号怎么回事呢)

    华为手机下载任务在哪查看(华为手机下载任何软件让绑了手机号怎么回事呢)

  • 苹果x怎样设置黑名单打不进电话来(苹果x怎样设置面容解锁)

    苹果x怎样设置黑名单打不进电话来(苹果x怎样设置面容解锁)

  • 电脑突然关不了机了怎么办(电脑突然关不了机怎么回事)

    电脑突然关不了机了怎么办(电脑突然关不了机怎么回事)

  • 华为p40开发者选项怎么打开(华为P40开发者选项怎么打开模拟位置)

    华为p40开发者选项怎么打开(华为P40开发者选项怎么打开模拟位置)

  • 锁屏动画该怎么设置(锁屏动画怎么设置在哪)

    锁屏动画该怎么设置(锁屏动画怎么设置在哪)

  • mfd文件用什么软件打开(mfd的文件怎么用手机打开)

    mfd文件用什么软件打开(mfd的文件怎么用手机打开)

  • 爱奇艺选集显示不出来(爱奇艺选集按钮灰色什么情况)

    爱奇艺选集显示不出来(爱奇艺选集按钮灰色什么情况)

  • 笔记本死机怎么强制关机(笔记本无法开机怎么解决)

    笔记本死机怎么强制关机(笔记本无法开机怎么解决)

  • 华为mate30prowifi连不上(华为mate30prowifi和蓝牙已停用)

    华为mate30prowifi连不上(华为mate30prowifi和蓝牙已停用)

  • 电脑立体声混音干嘛用(电脑立体声混音怎么开)

    电脑立体声混音干嘛用(电脑立体声混音怎么开)

  • 苹果id更新设置是什么意思(苹果id更新设置必须更新吗)

    苹果id更新设置是什么意思(苹果id更新设置必须更新吗)

  • 华为畅享10s跑分多少

    华为畅享10s跑分多少

  • 两个qq号关联后会怎样(两个QQ号关联后如何查询对方登录我的号)

    两个qq号关联后会怎样(两个QQ号关联后如何查询对方登录我的号)

  • wps会员可以几个人同时用(wps会员可以多少个人共用)

    wps会员可以几个人同时用(wps会员可以多少个人共用)

  • qq如何转发多条聊天记录(怎样qq转发多条消息)

    qq如何转发多条聊天记录(怎样qq转发多条消息)

  • 如何设置尾注(如何设置尾注上角标格式)

    如何设置尾注(如何设置尾注上角标格式)

  • 微信的草稿箱怎么恢复(微信的草稿箱怎么找到)

    微信的草稿箱怎么恢复(微信的草稿箱怎么找到)

  • 苹果手机录音在哪里(苹果手机录音在哪儿录)

    苹果手机录音在哪里(苹果手机录音在哪儿录)

  • 微信打卡小程序怎么弄(微信打卡小程序怎么补打卡)

    微信打卡小程序怎么弄(微信打卡小程序怎么补打卡)

  • 剪映多出来的音乐怎么办(剪映多出来的音频怎么删)

    剪映多出来的音乐怎么办(剪映多出来的音频怎么删)

  • xmp2.0什么意思(xmp1和xmp2有什么区别)

    xmp2.0什么意思(xmp1和xmp2有什么区别)

  • BIOS设置U盘启动图解教程 教你如何设置U盘启动(两种方法)(bios设置u盘启动的步骤)

    BIOS设置U盘启动图解教程 教你如何设置U盘启动(两种方法)(bios设置u盘启动的步骤)

  • 织梦dede怎么替换默认的模板(织梦怎么改文字)

    织梦dede怎么替换默认的模板(织梦怎么改文字)

  • 股权转让所得如何申报个税
  • 差额征税扣除额是什么意思
  • 开发票要多交费正常吗?
  • 除湿机 哪个好
  • 其他收益科目账务处理
  • 已认证未抵扣什么意思
  • 经营租赁是主营业务收入吗
  • 研发费用准备金计提账务处理
  • 刷信用卡的手续费去哪了
  • 挂靠被查出来后挂靠费怎么处理?
  • 建筑业预征缴纳税款
  • 免税个体户发票税率多少
  • 资产负债表和业务活动表勾稽关系不对怎么查
  • 商品进销差价属不属于存货
  • 水利工程建设费用组成
  • 发票打偏了是否罚款
  • 个税免缴款
  • 免税店购物需要满足什么条件
  • 贷款逾期账务处理流程
  • 跨年的物业费如何记账
  • 小型微利企业的优惠政策
  • 增值税专用发票的税率是多少啊
  • 企业清算期限如何规定
  • PHP Warning:PHP Startup: in Unknown on line 0解决办法
  • 缴纳集团公司的税收
  • 2015年4月4日摄于Tear Drop Arch附近的月全食,犹他州纪念碑谷 (© Alan Dyer/Alamy)
  • PHP:mcrypt_get_block_size()的用法_Mcrypt函数
  • 短期借款会计分录例题
  • 前端常问的面试题
  • 关联方核对
  • php获取前一天的时间
  • 小微企业减免额怎么计算
  • 长期股权投资成本怎么计算
  • 对方公司开收据盖什么章
  • 什么是临时雇佣
  • 如何用wordpress
  • sql server 2005安装在2016
  • pythonzen
  • 出口免税不退税会计分录
  • 固定资产卡片账是什么
  • 结转本年利润要算期初余额吗
  • 会计分录结转进项怎么算
  • 增值税进项发票如何做账
  • 收不回来的问题
  • 冲减以前年度营业外收入分录
  • 当月没认证发票有补救措施吗
  • 因质量问题对方直接扣款也不开票
  • 应收账款和应付账款的管理
  • 付设备款的会计分录
  • 销售商品的折扣
  • 在网上订机票怎么订
  • 金蝶财务软件服务器
  • 到期不付款跟客户怎么说
  • 累计摊销可以做什么分录
  • mysqlpid文件没有
  • mysql修改允许远程连接
  • 低配置装什么系统
  • 鼠标系统怎么安装
  • 一句命令
  • win2003系统要求
  • 轻松跨越英语关在线阅读
  • win10访问局域网电脑需要用户名和密码
  • assoc.exe
  • Remind_XP.exe - Remind_XP是什么进程 有什么用
  • windows7开机后显示配置失败
  • win8怎么设置自启动
  • 在linux操作系统中,/etc/rc.d/init.d
  • 获取文件内容
  • linux命令提示符
  • 怎么优化项目
  • activity跳转闪退
  • 用javascript
  • jQuery插件安装教程
  • 四川省电子税务局官网下载
  • 国家税务四川税务总局APP
  • 税务工商指的是什么
  • 广东省广州市税务局分数线
  • 税务局全年绩效分析报告
  • 房产税纳税义务时间
  • 郑州房子契税退税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设