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>
相关推荐
web行路人6 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0017 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92125 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂28 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石36 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程37 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二1 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236481 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript