React函数式组件改变状态useState()的用法

本文介绍了在React函数式组件中如何利用useState()进行状态管理,以实现一个点击切换背景颜色的盒子为例,详细阐述了启用状态、初始化状态以及根据需求更新状态的步骤。通过绑定onClick事件并利用三元表达式来改变背景颜色,展示了函数式组件状态更新的基本操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

函数式组件主要使用 useState() 进行状态管理
如果页面中某个元素需要改变状态,必须进行以下步骤才能成功改变其状态
比如现在有一个需求,页面中有一个盒子,初始状态背景颜色是红色的,点击时会变成绿色,再点击又变回红色,就这样每次点击背景颜色都在红色和绿色之间切换。

  1. 启用状态
  • 从React中引入useState()函数
import {useState} from 'react'
  1. 初始化状态
  • 给盒子设置初始样式(宽度200px,高度200px),这些在less文件里写着,可以忽略
  • 使用useState()方法定义变量color以及改变此变量的函数changeBackgroundColor,并赋一个初始值为'red'的背景颜色
  • 使用此变量<div style={{backgroundColor: color}}></div>
const App=()=>{
    const [color,changeBackgroundColor] = useState('red')
    return (
        <div className="app">
            <div style={{backgroundColor: color}}></div>
        </div>
    )
}

在这里插入图片描述

  1. 根据需求更新状态
    需求是点击盒子改变背景颜色,所以绑定onClick事件
const App=()=>{
    const [color,changeBackgroundColor] = useState('red')
    const changeColor=()=>{
        changeBackgroundColor(color=='green' ? 'red' : 'green')
    }
    return (
        <div className="app">
            <div style={{backgroundColor: color}} onClick={changeColor}></div>
        </div>
    )
}

changeColor为点击盒子触发的函数,在此函数里面再调用changeBackgroundColor函数,这里用到了三元表达式,首先判断当前颜色——如果是绿色将其改变成红色,如果不是绿色将其改变成绿色即可,等价于

if(color=='red'){
	changeBackgroundColor('green')
}else{
	changeBackgroundColor('red')
}

在这里插入图片描述

综上所述,useState()函数中第一个变量是设置变量,第二个变量是改变变量。
函数式组件与类式组件更新状态略有不同,可参考我的另外一篇关于类式组件更新状态的文章进行对比。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值