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

相关推荐
IT_陈寒2 分钟前
SpringBoot开发实战:从入门到精通
前端·人工智能·后端
乘风gg2 分钟前
一个人一个月合并 2500 PRs 的秘密是什么?
前端·ai编程·claude
郑州光合科技余经理13 分钟前
本地生活服务系统:预约状态和进度通知接口怎么拆
java·开发语言·前端·javascript·后端·php·生活
Peter-Code37 分钟前
Nginx 常用操作整理(前端)
服务器·前端·nginx
半个落月9 小时前
LangSmith 全链路观测(下):用 Dataset 与 LLM Judge 量化评估 RA
javascript·langchain
半个落月10 小时前
LangSmith 全链路观测(上):用 LangGraph 与 Milvus 构建可追踪的 RAG 客服
javascript·langchain
Java后端的Ai之路10 小时前
06-React-Props
前端·react.js·前端框架
半个落月10 小时前
LangChain.js Agent 中间件实战:生命周期、动态工具与文件权限
javascript·langchain
Flynt11 小时前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn11 小时前
渲染管线
前端