【React】事件绑定、React组件、useState、基础样式

React 教程

目录

  1. 事件绑定
    1.1. 基础实现
    1.2. 使用事件参数
    1.3. 传递自定义参数
    1.4. 同时传递事件对象和自定义参数

  2. React 组件
    2.1. 组件是什么
    2.2. 组件基础使用

  3. useState:状态管理
    3.1. 基础使用
    3.2. 状态的修改规则
    3.3. 修改对象状态

  4. 基础样式
    4.1. 行内样式
    4.2. 类名控制


1. 事件绑定

1.1. 基础实现

React 中的事件绑定遵循驼峰命名法。

import React from 'react';function App() {const clickHandler = () => {console.log('button按钮点击了');};return <button onClick={clickHandler}>click me</button>;
}export default App;

1.2. 使用事件参数

事件回调函数中设置形参 e 以获取事件对象。

function App() {const clickHandler = (e) => {console.log('button按钮点击了', e);};return <button onClick={clickHandler}>click me</button>;
}

1.3. 传递自定义参数

通过箭头函数传递自定义参数。

function App() {const clickHandler = (name) => {console.log('button按钮点击了', name);};return <button onClick={() => clickHandler('jack')}>click me</button>;
}

1.4. 同时传递事件对象和自定义参数

传递事件对象 e 和自定义参数,注意参数顺序。

function App() {const clickHandler = (name, e) => {console.log('button按钮点击了', name, e);};return <button onClick={(e) => clickHandler('jack', e)}>click me</button>;
}

2. React 组件

2.1. 组件是什么

组件是用户界面的一部分,具有自己的逻辑和外观。

2.2. 组件基础使用

组件是首字母大写的函数,可以像标签一样使用。

import React from 'react';function Button() {return <button>click me</button>;
}function App() {return (<div><Button /><Button /></div>);
}export default App;

3. useState:状态管理

3.1. 基础使用

useState 钩子允许组件添加状态变量。

import React, { useState } from 'react';function App() {const [count, setCount] = useState(0);return (<div><button onClick={() => setCount(count + 1)}>{count}</button></div>);
}export default App;

3.2. 状态的修改规则

状态是只读的,应替换而不是直接修改状态。

function App() {const [count, setCount] = useState(0);const handleClick = () => {setCount(count + 1);};return (<div><button onClick={handleClick}>{count}</button></div>);
}

3.3. 修改对象状态

set 方法传递一个全新的对象来修改对象状态。

function App() {const [form, setForm] = useState({ name: "jack" });const handleClick = () => {setForm({ ...form, name: "lisi" });};return (<div><button onClick={handleClick}>{JSON.stringify(form)}</button></div>);
}

4. 基础样式

4.1. 行内样式

通过 style 属性设置行内样式。

function App() {return <div style={{ color: 'red' }}>this is div</div>;
}

4.2. 类名控制

使用 className 属性和 CSS 文件控制样式。

import React from 'react';
import './index.css'; // 引入 CSS 文件function App() {return <span className="foo">this is span</span>;
}export default App;
/* index.css */
.foo {color: red;
}

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

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

相关文章

基于Web的特产美食销售系统的设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

HardeningMeter:一款针对二进制文件和系统安全强度的开源工具

关于HardeningMeter HardeningMeter是一款针对二进制文件和系统安全强度的开源工具&#xff0c;该工具基于纯Python开发&#xff0c;经过了开发人员的精心设计&#xff0c;可以帮助广大研究人员全面评估二进制文件和系统的安全强化程度。 功能特性 其强大的功能包括全面检查各…

抖音seo短视频账号矩阵系统源码-SaaS开源部署流程开发者技术分享

抖音seo账号矩阵系统&#xff0c;短视频矩阵系统源码&#xff0c; 短视频矩阵是一种常见的视频编码标准&#xff0c;通过多账号一键授权管理的方式&#xff0c;为运营人员打造功能强大及全面的“矩阵式“管理平台。使用矩阵系统也能保证账号的稳定性&#xff0c;降低账号的风险…

客户端与服务器通讯详解(3):如何选择合适的通讯方式

上篇文章中&#xff0c;我们讲解了客户端与服务器通讯详解&#xff08;2&#xff09;&#xff1a;12种常见通讯方式&#xff0c;重点讲解了http、websocket和RESTful API三种&#xff0c;本文我们继续讲解如何依据场景选择最合适的通讯方式。欢迎友友们点赞评论。 一、客户端服…

基于 asp.net家庭财务管理系统设计与实现

博主介绍&#xff1a;专注于Java .net php phython 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟 我的博客空间发布了1000毕设题目 方便大家学习使用感兴趣的可以先…

Linux 下 ElasticSearch 集群部署

目录 1. ElasticSearch下载 2. 环境准备 3. ElasticSearch部署 3.1 修改系统配置 3.2 开放端口 3.3 安装 ElasticSearch 4. 验证 本文将以三台服务器为例&#xff0c;介绍在 linux 系统下ElasticSearch的部署方式。 1. ElasticSearch下载 下载地址&#xff1a;Past Rel…

vue3+ts+vite项目中使用vite-plugin-pwa搭建 PWA 项目

参考官方github地址&#xff1a; https://github.com/vite-pwa/vite-plugin-pwa 官方文档地址&#xff1a; https://vite-pwa-org.netlify.app/guide MDN地址&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 前提概要 最近项目更新需求中&am…

资源管理大师:如何在Gradle中配置资源目录

资源管理大师&#xff1a;如何在Gradle中配置资源目录 在软件开发中&#xff0c;资源管理是项目构建过程中的一个重要环节。资源通常包括配置文件、图片、样式表、本地化文件等&#xff0c;它们对于应用程序的运行至关重要。Gradle作为一个灵活且功能强大的构建工具&#xff0…

【C++】类和对象·this指针

C中的类与C语言中的结构体有很多的相似的地方&#xff0c;可以说本质上除了结构体只能定义成员变量&#xff0c;以及结构体默认的访问控制权限是public之外与class没啥区别。但是结构体变量每次调用函数的时候需要指针&#xff0c;而类中的成员函数明明被保存在公共代码段&…

php 方法追踪其被调用的踪迹

一、遇到的问题 一个公共方法&#xff0c;有多个调用入口&#xff0c;快速排查到其被调用的入口 二、解决 使用debug_backtrace()&#xff0c;其记录了调用方法的所有上层方法&#xff0c;如下为打印的debug_backtrace()的数据&#xff0c;从键值0开始&#xff0c;依次往上一…

Hive第三天

1. 后台启动HIVE的JDBC连接 0 表示标准输入 1 表示标准输出 2 表示标准错误输出 nohup 表示挂起 最后的 & 表示 后台启动 nohup hive -service hiveserver2 > /usr/local/soft/hive-3.1.2/log/hiveserver2.log 2>&1 & jps 查看 Runj…

30秒学会UML-功能类图

目录 1、类图本体 三部分 修饰符 2、类与类直接关系 泛化关系 实现关系 简单关联关系 依赖关系 组合关系 聚合关系 1、类图本体 三部分 第一层&#xff1a;类名第二层&#xff1a;成员变量&#xff08;类的属性&#xff09;第三层&#xff1a;函数方法&#xff08;类…

水利行业的智慧革命:深度剖析智慧水利解决方案,看其如何以科技力量提升水资源管理效率,保障水生态安全

目录 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心要素 1. 感知层&#xff1a;全面监测&#xff0c;精准感知 2. 网络层&#xff1a;互联互通&#xff0c;信息共享 3. 平台层&#xff1a;数据分析&#xff0c;智能决策 4. 应用层&#xff1a;精准施策&#xff0…

【线程系列之五】线程池介绍C语言

一、基本概念 1.1 概念 线程池&#xff08;Thread Pool&#xff09;是一种基于池化技术管理线程的机制&#xff0c;旨在减少线程创建和销毁的开销&#xff0c;提高系统资源的利用率&#xff0c;以及更好地控制系统中同时运行的线程数量。线程池通过预先创建一定数量的线程&am…

3 C 语言运算符深度解析:从基础到实战

目录 1 运算符分类 2 算术运算符与算术表达式 2.1 算术运算符的用法 2.2 左操作数和右操作数 3 关系运算符与关系表达式 3.1 关系运算符的用法 3.2 常量左置防错 3.3 三数相等判断误区 4 逻辑运算符与逻辑表达式 4.1 逻辑运算符的用法 4.2 闰年的判断 4.3 短路运算…

golang单元测试性能测试常见用法

关于go test的一些说明 golang安装后可以使用go test工具进行单元测试 代码片段对比的性能测试,使用起来还是比较方便,下面是一些应用场景 平时自己想做一些简单函数的单元测试&#xff0c;不用每次都新建一个main.go 然后go run main.go相对某个功能做下性能测试 看下cpu/内存…

k8s集群 安装配置 Prometheus+grafana+alertmanager

k8s集群 安装配置 Prometheusgrafanaalertmanager k8s环境如下&#xff1a;机器规划&#xff1a; node-exporter组件安装和配置安装node-exporter通过node-exporter采集数据显示192.168.40.180主机cpu的使用情况显示192.168.40.180主机负载使用情况 Prometheus server安装和配置…

自动驾驶AVM环视算法–全景和标定全功能算法实现和exe测试demo

参考&#xff1a;全景和标定全功能算法实现和exe测试demo-金书世界 1、测试环境 opencv310vs2022 2、使用的编程语言 c和c 3、测试的demo的获取 更新&#xff1a;测试的exe程序&#xff0c;无需解压码就可以体验算法测试效果 百度网盘&#xff1a; 链接&#xff1a;http…

代码随想录学习 54day 图论 Bellman_ford 算法精讲

Bellman_ford 算法精讲 卡码网&#xff1a;94. 城市间货物运输 I 题目描述 某国为促进城市间经济交流&#xff0c;决定对货物运输提供补贴。共有 n 个编号为 1 到 n 的城市&#xff0c;通过道路网络连接&#xff0c;网络中的道路仅允许从某个城市单向通行到另一个城市&#xf…

代理IP服务中的代理池大小有何影响?

在当今数字化时代&#xff0c;网络爬虫已经成为获取各类信息必不可少的工具。在大规模数据抓取中&#xff0c;使用单一 IP 地址或同一 IP 代理往往会面临抓取可靠性降低、地理位置受限、请求次数受限等一系列问题。为了克服这些问题&#xff0c;构建代理池成为一种有效的解决方…