React学习day02-React事件绑定、组件、useState、React组件样式处理方式

news2024/11/17 9:36:55

3、React事件绑定(以点击事件为例)

(1)语法(整体遵循驼峰命名法):on+事件名称={事件处理程序}

比如:点击事件onClick(类似于vue中的@click)

(2)传参

        1)传递事件对象参数
                ①语法:在事件回调函数中设置形参e
                ②示例:

        2)传递自定义参数(不能直接写函数调用,这里的事件绑定需要一个函数引用)
              ①语法:事件绑定的位置改造成箭头函数的写法,在执行事件处理函数时传参
              ②示例:

        3)传递事件对象和自定义参数
        ①语法:在事件绑定的位置传递事件对象e和自定义参数,在事件处理函数中声明形参,但要注意顺序对应
        ②示例:

4、组件

(1)概念:一个组件就是用户页面的一部分,它有自己的逻辑和外观,组件之间也可以互相嵌套,也可以复用多次

(2)作用:利于组件化开发

        (组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用)

(3)React组件

        1)概念:在React中,一个组件就是首字母大写的函数。(它内部存放了组件的逻辑和视图UI,渲染组件只需将组件当成标签书写即可)
        ①定义组件

        ②使用组件

5、useState(一个React Hook函数)

(1)作用:允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果

(2)与普通JS的区别:状态变量一旦发生变化,视图也会发生变化(数据驱动视图)

(3)语法:

        const [状态变量,set函数]=useState(状态变量的初始值)

        (set函数用来修改状态变量)

 (4)修改状态的规则

        1)状态不可变
在React中,状态被认为是只读的,我们应该始终替换它,而不是修改它,直接接修改状态,不能引发视图更新

        2)对象状态修改:应该始终传给set方法一个全新的对象进行修改

(5)useState使用示例

(假设要使count实现点击自增1)

        1)导入react中的useState

        

        2)使用useState为变量count赋初始值

        

        3)为按钮绑定事件处理函数,实现变量自增

        

        

        4)效果

6、React组件样式处理方式

(1)行内样式

(2)class类名控制(属性名必须为className)

        1)语法:
        ①创建css文件,写入需要的样式

        ②导入样式文件

        ③使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2076075.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

成为Python高手,我能给出的最好建议

今天笔者将向大家分享5个良好的Python编程习惯,大牛认证,通过不断实践,助你写出更Pythonic的代码,让你向Python大师之路更进一步。 今天笔者将向大家分享5个良好的Python编程习惯,大牛认证,通过不断实践&a…

Java面试题精选:消息队列(二)

一、Kafka的特性 1.消息持久化:消息存储在磁盘,所以消息不会丢失 2.高吞吐量:可以轻松实现单机百万级别的并发 3.扩展性:扩展性强,还是动态扩展 4.多客户端支持:支持多种语言(Java、C、C、GO、…

WPF中如何根据数据类型使用不同的数据模板

我们在将一个数据集合绑定到列表控件时,有时候想根据不同的数据类型,显示为不同的效果。 例如将一个文件夹集合绑定到ListBox时,系统文件夹和普通文件夹分别显示为不同的效果,就可以使用模板选择器功能。 WPF提供了一个模板选择…

查找4(散列表)

1)基本概念 、 2)散列函数的构造 3)解决冲突 I)开放地址发 II)链地址法 4)散列表的查找

vs2022 C++ 使用MySQL Connector/C++访问mysql数据库

1、下载MySQL Connector/C,我这里下载的是debug版本,下载链接MySQL :: Download MySQL Connector/C (Archived Versions) 2、解压并且放到MySQL文件夹中,便于使用 3、打开vs2022,右键项目,点击属性 4、在 “C/C” ->…

el-input中show-password密码提示功能去掉

el-input中show-password密码提示功能去掉 一、效果图二、封装个组件三、如何使用 一、效果图 二、封装个组件 <template><divclass"el-password el-input":class"[size ? el-input-- size : , { is-disabled: disabled }]"><inputclass…

Java线上监控诊断产品Arthas(续集)

Java线上监控诊断产品Arthas&#xff08;续集&#xff09; 前言1.auth指令2.monitor指令解读 3.classloader指令场景 4.dump指令场景 5.getstatic指令场景 6.heapdump指令场景 7.profiler指令场景 8.sc指令场景 9.trace指令场景 前言 在去年&#xff0c;我发表了一片文章&…

心血管内科常用评估量表汇总,附操作步骤与评定标准

心血管内科常用量表来评估患者病情、预测风险&#xff0c;量表在制定治疗方案和预测疾病进展等方面发挥着重要作用。常笑医学整理了6个心血管内科常用的评估量表&#xff0c;支持下载和在线使用&#xff0c;供临床医护人员参考。 01 GRACE缺血风险评估 &#xff08;完整量表请点…

Qt 学习第7天:Qt核心特性

元对象系统Meta-object system 来自AI生成&#xff1a; Qt中的元对象系统&#xff08;Meta-Object System&#xff09;是Qt框架的一个核心特性&#xff0c;它为Qt提供了一种在运行时处理对象和类型信息的能力。元对象系统主要基于以下几个关键概念&#xff1a; 1. QObject&a…

【91-136】行为型模式

目录 一.模板方法模式 1.1 概述 1.2 结构 1.3 案例 1.4 优缺点 1.5 使用场景 二.策略模式 2.1 概述 2.2 结构 2.3 案例 2.4 优缺点 2.5 使用场景 2.6 JDK 源码解析 三.命令模式 3.1 概述 3.2 结构 3.3 案例 3.4 优缺点 3.5 使用场景 四.责任链模式 4.1 概…

NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis 翻译

NeRF&#xff1a;将场景表示为用于视图合成的神经辐射场 引言。我们提出了一种方法&#xff0c;该方法通过使用稀疏的输入视图集优化底层连续体场景函数来实现用于合成复杂场景的新视图的最新结果。我们的算法使用全连通&#xff08;非卷积&#xff09;深度网络来表示场景&…

设计模式(一):七大原则

*设计模式的目的* 编写软件过程中,程序员面临着来自耦合性,内聚性以及可维护性,可扩展性,重用性,灵活性等多方面的挑战,设计模式是为了让程序(软件),具有更好 1) 代码重用性 (即:相同功能的代码,不用多次编写) 2) 可读性 (即:编程规范性, 便于其他程序员的阅读和理…

【C++ 第十七章】封装 unordered_map / unordered_set

声明&#xff1a;上一章讲解了 哈希结构的原理与实现&#xff0c;本章主要将上一章学过的拉链法的哈希结构封装进 unordered_map / unordered_set&#xff0c;所以需要先学过相关知识&#xff0c;才能更好吸收本章知识 上一章的链接&#xff1a;【C 第十六章】哈希 1. unorder…

Ubuntu24.04 安装向日葵远程访问工具

目录 安装向日葵远程访问工具 解决方案&#xff1a; 1.下载软件包 2.远程Ubuntu桌面控制卡住 卸载向日葵远程访问工具 安装向日葵远程访问工具 安装命令&#xff1a;sudo dpkg -i 文件名.deb sudo dpkg -i SunloginClient_15.2.0.63064_amd64.deb 提示错误如下&#xf…

后端修改资源后重新运行项目了,浏览器刷新资源没更新问题

修改后重启项目&#xff0c;去浏览器刷新&#xff1a; 没有改变&#xff1f; 解决办法&#xff1a; F12去调试器里“网络”工具栏下找到“禁用缓存”按钮即可解决

视频转换成文字的5种方法,看一遍就能学会

视频已成为我们获取信息的重要渠道之一。然而&#xff0c;有时我们更需要将视频中的精华内容以文字形式提取出来&#xff0c;以便进行编辑、整理或分享。今天&#xff0c;就为大家介绍五种视频转换成文字的高效方法&#xff0c;一起来了解下吧。 方法一&#xff1a;口袋视频转换…

如何抠图把背景换成透明怎么做?

要抠图并将背景变为透明&#xff0c;这样做的好处是可以方便地将所选物体从原始图像中分离出来&#xff0c;并在其他背景上自由组合。怎么把图片变成透明底&#xff0c;抠图攻略分享&#xff1a;让你轻松上手抠图&#xff01; 通过抠图和背景透明化&#xff0c;您可以创建更多种…

深入理解微服务中的负载均衡算法与配置策略

负载均衡算法 我们首先来探讨一下默认情况下Ribbon使用的负载均衡算法。有些人可能会说它使用轮询算法&#xff0c;因为在本地测试时&#xff0c;我们经常会看到轮询的效果。然而&#xff0c;简单地依赖这种表面的观察来回答面试题是有风险的。实际上&#xff0c;忽略了深入理解…

Superset 无需登录访问分享的图表

1&#xff0c;进入Superset安装目录找到config.py文件 2&#xff0c;修改config.py中的配置项 添加 PUBLIC_ROLE_LIKE: Optional[str] "Gamma" # Grant public role the same set of permissions as for a selected builtin role. # This is useful if one wants to…

Large Bin Attack 源码调试

Large Bin Attack 分配跟 large bin 有关的 chunk&#xff0c;要经过 fastbin&#xff0c;unsorted bin&#xff0c;small bin 的分配&#xff0c;建议在学习 large bin attack 之前搞清楚 fastbin&#xff0c;unsorted bin 分配的流程。 large bin中双向链表的连接方法&…