React的useState的基础使用

import {useState} from 'react'

// 1.调用useState添加状态变量

// count 是新增的状态变量

// setCount 修改状态变量的方法

// 2.添加点击事件回调

复制代码
// userState实现计数实例

import {useState} from 'react'

// 使用组件
function App() {

  // 1.调用useState添加状态变量
  // count  是新增的状态变量
  // setCount  修改状态变量的方法
  const [count,setCount]=useState(10);
  // 2.添加点击事件回调
  const handelClick=()=>{
    setCount(count+1);
  }

  return (
    <div className="App">
      {/* 动态渲染组件 */}
      <button onClick={handelClick}>{count}</button>
    </div>
  );
}
export default App;

上图举例

复制代码
import {useState} from 'react'

// 使用组件
function App() {

  const [userInfo,setUserInfo]=useState({
    'age':10,'name':'菲菲'
  });
  // 2.添加点击事件回调
//(...userInfo   表示当前的变量对象,)
//(age:userInfo.age+1   age是对象中的一个属性  如果重名就是修改对象中的重名属性值)
  const handelClick1=()=>{
    setUserInfo({
      ...userInfo,
      age:userInfo.age+1
    });
  }

  return (
    <div className="App">
      {/* 动态渲染组件 */}
      <h1>对象的的动态修改</h1>
      <button onClick={handelClick1}>{userInfo.age}</button>
    </div>
  );
}
export default App;
相关推荐
慢半拍iii8 分钟前
JAVA Web —— A / 网页开发基础
前端
gnip27 分钟前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty34 分钟前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人2 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@2 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育2 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘3 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e3 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost3 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati3 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试