当前位置: 首页 > article >正文

react crash course 2024(5) useState钩子

使用 数组解构 来命名状态变量,例如 [something, setSomething]

import { useState } from 'react';
const [showFullDescription,setShowFullDescription] = useState(false) //设置默认值为false

react的事件

点击事件 οnclick={}

改变状态的setSomething函数用法

 {/* 在set函数中直接传递值setShowFullDescription */}
  <button onClick={()=> setShowFullDescription(!showFullDescription)} className="text-indigo-500 mb-5 hover:text-indigo-600">
  {showFullDescription ? 'Less' :'More'}
 </button>
{/* 通过传递函数来改变状态 */}
 <button onClick={()=> setShowFullDescription((prevState)=>!prevState)} className="text-indigo-500 mb-5 hover:text-indigo-600">
  {showFullDescription ? 'Less' :'More'}
 </button>


http://www.kler.cn/a/320004.html

相关文章:

  • 【算法学习笔记】30:埃氏筛(Sieve of Eratosthenes)和线性筛(Linear Sieve)
  • HarmonyOS NEXT应用开发边学边玩系列:从零实现一影视APP (二、首页轮播图懒加载的实现)
  • 大疆发布可折叠航拍无人机,仅重249g,支持 4800 万像素拍摄
  • Linux的常用命令(三)
  • 深度学习电影推荐-CNN算法
  • MYSQL创建表
  • mac终端打开报complete 13 command not found compdef异常处理以及命令补全功能实现
  • 详细分析SpringMvc中HandlerInterceptor拦截器的基本知识(附Demo)
  • java知识:什么是GC?GC调优思路又有哪些
  • C++深入学习string类成员函数(1):默认与迭代
  • 聚观早报 | 小米新车规划曝光;北京汽车官宣更换标志
  • Django后台管理复杂模型
  • 【JVM】类加载机制
  • leetcode-189:轮转数组
  • 阿尔兹海默症患者出行随身助手设计_kaic
  • 【洛谷】P10417 [蓝桥杯 2023 国 A] 第 K 小的和 的题解
  • 免费制作证件照的小程序源码
  • 机器学习EDA探查工具Pandas profiling
  • nvm以及npm源配置
  • 注意力机制篇 | YOLOv8改进之在C2f模块引入EffectiveSE注意力模块 | 基于SE注意力
  • 聚观早报 | 豆包视频生成大模型发布;华为纯血鸿蒙将开启公测
  • 基于SpringBoot+Vue的考研百科网站系统
  • QT C++ 自学积累 『非技术文』
  • 数字IC设计\FPGA 职位经典笔试面试整理--基础篇2
  • TCP/IP 协议栈
  • 第五届计算机科学与管理科技国际学术会议(ICCSMT 2024)