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>
相关推荐
花海少爷4 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7948 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You17 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生28 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410931 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap43 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript