React useState基本类型变量的使用

React 中,useState 是一个 Hook,用于在函数组件中添加状态,它可以让函数组件拥有状态。基本使用方法如下:

js 复制代码
// App.jsx
import React, { useState } from 'react'
 
function App() {
  // 使用 useState 创建一个状态变量,初始值为基本类型(比如字符串)
  const [text, setText] = useState('React useState')
 
  // 更新状态的函数
  function handleChange(event) {
    setText(event.target.value)
  }
 
  return (
    <div>
      <input type="text" value={ text } onChange={ handleChange } />
      <p>{ text }</p>
    </div>
  )
}

在这个例子中,text 是一个基本类型变量,初始值为字符串 'React useState'setText 函数用于更新这个状态变量。当输入框的内容变化时,handleChange 函数会被调用,并用新的值更新 text 状态。

相关推荐
广州华水科技18 分钟前
水库的单北斗GNSS变形监测系统是什么?主要有哪些应用?
前端
薛一半19 分钟前
React三大属性之props
前端·javascript·react.js
用户5757303346241 小时前
🔥 前端必考!AJAX 数据请求全解析,async true/false 区别一次搞懂
javascript
Wect1 小时前
LeetCode 105. 从前序与中序遍历序列构造二叉树:题解与思路解析
前端·算法·typescript
烤麻辣烫1 小时前
正则表达式快速掌握
前端·javascript·学习·正则表达式·html
长城20241 小时前
HTML5中可以省略属性值的11个属性总结
前端·html·html5·属性值·省略属性值
木斯佳1 小时前
前端八股文面经大全:小红书前端一面(2026-2-3)·面经深度解析
前端·状态模式
心之语歌2 小时前
flutter 父子组件互相调用方法,值更新
前端·javascript·flutter
岱宗夫up2 小时前
FastAPI进阶3:云原生架构与DevOps最佳实践
前端·python·云原生·架构·前端框架·fastapi·devops
赛博切图仔3 小时前
告别“打字机”:Generative UI 如何重塑 AI 时代的前端交互?
前端·人工智能·ui