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

相关推荐
沛沛老爹2 分钟前
Web开发者实战AI Agent:基于Dify实现OpenAI Deep Research智能体
前端·人工智能·gpt·agent·rag·web转型
一入程序无退路2 分钟前
vue中序号不能按排序显示
javascript·vue.js·elementui
冬奇Lab3 分钟前
【Cursor进阶实战·01】Figma设计稿一键还原:Cursor + MCP让前端开发提速10倍
android·前端·后端·个人开发·figma
JarvanMo7 分钟前
用 Flutter、SwiftUI 和 Compose 写同一个界面:一份真实开发者的实测报告
前端
可以吧可以吧8 分钟前
前端vue jenkins打包资源增加阿里云oss+cdn加速
前端·vue.js·jenkins
hashiqimiya14 分钟前
vue项目的选择星级样式和axios依赖调用
前端·javascript·vue.js
沛沛老爹17 分钟前
Web开发者实战AI Agent:基于Dify的多模态文生图与文生视频智能体项目
前端·人工智能·llm·agent·rag·web转型
哟哟耶耶17 分钟前
Plugin-前端相关插件了解
前端
不一样的少年_19 分钟前
老王请假、客户开喷、我救火:一场递归树的性能突围战
前端·javascript·性能优化
搬砖的阿wei21 分钟前
JavaScript 请求数据的四种方法:Ajax、jQuery 、Fetch和 Axios
javascript·ajax·axios·jquery