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 状态。

相关推荐
小桥风满袖几秒前
Three.js-硬要自学系列33之专项学习基础材质
前端·css·three.js
聪明的水跃鱼5 分钟前
Nextjs15 构建API端点
前端·next.js
小明爱吃瓜22 分钟前
AI IDE(Copilot/Cursor/Trae)图生代码能力测评
前端·ai编程·trae
水冗水孚24 分钟前
🚀四种方案解决浏览器地址栏预览txt文本乱码问题🚀Content-Type: text/plain;没有charset=utf-8
javascript·nginx·node.js
不爱说话郭德纲27 分钟前
🔥Vue组件的data是一个对象还是函数?为什么?
前端·vue.js·面试
绅士玖29 分钟前
JavaScript 中的 arguments、柯里化和展开运算符详解
前端·javascript·ecmascript 6
每天都想着怎么摸鱼的前端菜鸟31 分钟前
【uniapp】uniapp热更新WGT资源,简单的多环境WGT打包脚本
javascript·uni-app
GIS之路32 分钟前
OpenLayers 图层控制
前端
断竿散人32 分钟前
专题一、HTML5基础教程-http-equiv属性深度解析:网页的隐形控制中心
前端·html
星河丶32 分钟前
介绍下navigator.sendBeacon方法
前端