使用 数组解构 来命名状态变量,例如 [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>