React hook 之 useState

在组件的顶部定义状态变量,并传入初始值,确保当这些状态变量的值发生变化时,页面会重新渲染。

const [something,setSomething] = useState(initialState);

useState 返回一个由两个值组成的数组:1、当前的 state,在首次渲染时,它将与你传递的 initialState 相匹配。2、set 函数,它可以让你将 state 更新为不同的值并触发重新渲染。

something是定义的状态变量,initialState是初始值,setSomething函数允许你将 state 更新为不同的值并触发重新渲染。

1、定义一个字符串变量

复制代码
import { useState } from 'react';
// 定义一个字符串变量,初始值为null;
const [name, setName] = useState(null);
// 需要改变时,直接调用setName赋值
setName('hello world');
console.log(name); // 打印结果为: hello world

2、定义一个对象变量

复制代码
import { useState } from 'react';
const [serverObj, setServerObj] = useState({ip:'',port:''});
 // 输入框变化时
  const inputChange = (val) => {
  // 调用setServerObj赋值
    setServerObj({ ...serverObj, ip: val });
  };
  // 输入框组件
<Input placeholder='IP' value={serverObj.ip} onChange={val=>{inputChange(val)}}/>

注意:useState 是一个 Hook,因此你只能在组件的顶层调用它。

相关推荐
foxhuli22934 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说2 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_3 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html