当前位置: 首页 > news >正文

react中点击按钮不能获取最新的state时候

在这个问题中,用户希望在点击确认按钮时触发handleChange函数,并且能够正确获取到最新的bzText值。最初的代码中,在handleOpen函数中弹出一个确认框,并在确认框的onOk回调函数中调用handleChange函数。然而,由于组件传值问题,导致在onOk回调函数中无法获取到最新的bzText值。


const handleOpen = () => {Modal.confirm({title: `是否申请解锁经办人姓名`,content: (<div className={styles.bz}>备注:<InputonChange={(e) => {setBzText(e?.target?.value);}}placeholder="请输入"/></div>),cancelText: '取消',okText: '确认',onOk() {handleChange('change', bzText);}});
};const handleChange = (type, bzText) => {console.log(bzText, 'bzText');
};// bzText是用useState声明的

为了解决这个问题,可以使用useRef来创建一个引用(bzTextRef),并在输入框的onChange事件中更新这个引用的值。然后,在确认框的onOk回调函数中通过bzTextRef.current来获取最新的bzText值,从而确保在handleChange函数内部能够正确访问到最新的值。

import { useRef } from 'react';const YourComponent = () => {const bzTextRef = useRef(null);const handleOpen = () => {Modal.confirm({title: `是否申请解锁经办人姓名`,content: (<div className={styles.bz}>备注:<InputonChange={(e) => {bzTextRef.current = e?.target?.value;}}placeholder="请输入"/></div>),cancelText: '取消',okText: '确认',onOk() {handleChange('change', bzTextRef.current);}});};const handleChange = (type, bzText) => {console.log(bzText, 'bzText');};// bzText是用useState声明的
};export default YourComponent;

综上所述,通过使用useRef来存储bzText的引用,可以解决在确认框中无法获取到最新值的问题。

相关文章:

react中点击按钮不能获取最新的state时候

在这个问题中&#xff0c;用户希望在点击确认按钮时触发handleChange函数&#xff0c;并且能够正确获取到最新的bzText值。最初的代码中&#xff0c;在handleOpen函数中弹出一个确认框&#xff0c;并在确认框的onOk回调函数中调用handleChange函数。然而&#xff0c;由于组件传…...

2、鸿蒙学习-申请调试证书和调试Profile文件

申请发布证书 发布证书由AGC颁发的、为HarmonyOS应用配置签名信息的数字证书&#xff0c;可保障软件代码完整性和发布者身份真实性。证书格式为.cer&#xff0c;包含公钥、证书指纹等信息。 说明 请确保您的开发者帐号已实名认证。每个帐号最多申请1个发布证书。 1、登录AppGa…...

蓝桥杯算法基础(13):十大排序算法(希尔排序) (快速排序)c语言版

希尔排序 优化版的插入排序&#xff0c;优化的地方就是步长&#xff08;增量&#xff09;增大了&#xff0c;原来的插入排序的步长&#xff08;增量&#xff09;是1&#xff0c;而希尔排序的步长&#xff08;增量&#xff09;可以很大&#xff0c;然后逐渐减小直到1形成插入排…...

web学习笔记(三十二)

目录 1.函数的call、apply、bind方法 1.1call、apply、bind的相同点 1.2call、apply、bind的不同点 1.3call、apply、bind的使用场景 2. 对象的深拷贝 2.1对象的浅拷贝 2.1对象的深拷贝 1.函数的call、apply、bind方法 1.1call、apply、bind的相同点 在没有传参数时&…...

Android 地图SDK 绘制点 删除 指定

问题 Android 地图SDK 删除指定绘制点 详细问题 笔者进行Android 项目开发&#xff0c;对于已标记的绘制点&#xff0c;提供撤回按钮&#xff0c;即删除绘制点&#xff0c;如何实现。 解决方案 新增绘制点 private List<Marker> markerList new ArrayList<>…...

Nodejs 第五十八章(大文件上传)

在现代网站中&#xff0c;越来越多的个性化图片&#xff0c;视频&#xff0c;去展示&#xff0c;因此我们的网站一般都会支持文件上传。 文件上传的方案 大文件上传&#xff1a;将大文件切分成较小的片段&#xff08;通常称为分片或块&#xff09;&#xff0c;然后逐个上传这…...

Linux编译器--gcc/g++的使用

1. gcc与g gcc与g分别是c语言与c代码的编译器&#xff0c;但同时g也兼容c语言。 我们知道在Linux中&#xff0c;系统并不以文件后缀来区分文件类别。但对于gcc与g等编译器而言却是需要的。Linux中c代码文件的后缀是.c&#xff0c;c代码文件的后缀是.cpp(.cc)(.cxx)。 在Linu…...

苍穹外卖-day13:vue基础回顾+进阶

vue基础回顾进阶 课程内容 VUE 基础回顾路由 Vue-Router状态管理 vuexTypeScript 1. VUE 基础回顾 1.1 基于脚手架创建前端工程 1.1.1 环境要求 要想基于脚手架创建前端工程&#xff0c;需要具备如下环境要求&#xff1a; ​ node.js 前端项目的运行环境 学习web阶段已安…...

蓝桥杯/慈善晚会/c\c++

问题描述 热心公益的G哥哥又来举办慈善晚会了&#xff0c;这次他邀请到了巴菲特、马云等巨富&#xff0c;还邀请到了大V、小C等算法界泰斗。晚会一共邀请了n位尊贵的客人&#xff0c;每位客人都位于不同的城市&#xff0c;也就是说每座城市都有且仅有一位客人。这些城市的编号为…...

2024.3.19

思维导图...

【Python】新手入门学习:详细介绍单一职责原则(SRP)及其作用、代码示例

【Python】新手入门学习&#xff1a;详细介绍单一职责原则&#xff08;SRP&#xff09;及其作用、代码示例 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyT…...

【DataWhale学习笔记】使用AgentScope调用qwen大模型

AgentScope AgentScope介绍 AgentScope是一款全新的Multi-Agent框架&#xff0c;专为应用开发者打造&#xff0c;旨在提供高易用、高可靠的编程体验&#xff01; 高易用&#xff1a;AgentScope支持纯Python编程&#xff0c;提供多种语法工具实现灵活的应用流程编排&#xff…...

【C++】手撕AVL树

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;能直接手撕AVL树。 > 毒鸡汤&#xff1a;放弃自…...

探索 TorchRe-ID--基于 Python 的人员再识别库

导言 人员再识别&#xff08;re-ID&#xff09;是计算机视觉中的一项重要任务&#xff0c;在监控系统、零售分析和人机交互中有着广泛的应用。TorchRe-ID 是一个功能强大、用户友好的 Python 库&#xff0c;它为人员再识别任务提供了一套全面的工具和模型。在本文中&#xff0…...

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Flex)

以弹性方式布局子组件的容器组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。Flex组件在渲染时存在二次布局过程&#xff0c;因此在对性能有严格要求的场景下建议使用Column、Row代替。Flex组…...

tmux最基础的一点应用-不用一直挂着ssh,可以干点别的事情

文章目录 使用原因基础命令创建一个窗口退出当前窗口重新进入万一忘记了环境名字想要删除环境 使用原因 跑程序要很久&#xff0c;需要干别的事情&#xff0c;电脑不能一直开&#xff0c;可以使用tmux来管理。 基础命令 创建一个窗口 tmux new -s <你自己起的环境名字&g…...

Java推荐算法——特征加权推荐算法(以申请学校为例)

加权推荐算法 文章目录 加权推荐算法1.推荐算法的简单介绍2.加权推荐算法详细介绍3.代码实现4.总结 1.推荐算法的简单介绍 众所周知&#xff0c;推荐算法有很多种&#xff0c;例如&#xff1a; 1.加权推荐&#xff1a;分为简单的特征加权&#xff0c;以及复杂的混合加权。主要…...

探索什么便签软件好用,可以和手机同步的便签软件

在信息技术日新月异的今天&#xff0c;各类数字工具已经成为我们生活与工作的重要助手。便签软件作为一种简单却高效的辅助工具&#xff0c;悄然改变着人们的记录习惯与时间管理方式。而在诸多便签软件中&#xff0c;能够实现手机与电脑同步功能的产品尤显其独特的价值。那么&a…...

字符函数与字符串函数

前言 本次博客可以说内容最为多的一次博客&#xff0c;讲解同样很细致大家好好看看 1字符函数 在讲解字符函数时,大家得了解什么是字符吧 普通字符a b c 1 转义字符 \n 换行‘ \t’ 水平制表符\r回车 大家了解即可 在C语言中字符也可以有分类 所以我们先来看看…...

Kubernetes 项目整体布局 el-container

整体布局整体布局 你可能会去敲不同的项目&#xff0c;有很多种平台。那么其实都是可以复用的。唯一不同的就是main里面的内容是不同的&#xff0c;边框架子都是相同的。其实框架是不怎么变化的&#xff0c;变化的是main里面。 src/layout/Layout.vue 这里需要新增一个页面Lay…...

AI赋能写作:AI大模型高效写作一本通

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…...

unraid docker.img扩容

unraid 弹Docker image disk utilization of 99%&#xff0c;容器下载/更新失败 我的版本是6.11.5&#xff0c;docker.img满了导致容器不能更新&#xff0c;遇到同样问题的可以先用docker命令清除一下仓库(当然不一定能清理出来&#xff0c;我已经清理过只清理出来1G多点&…...

Python 实现1~100之间的偶数求和

result0 for i in range(101):if i%20:result result i print(result) 或者 result0 for i in range(2,101,2):result result i print(result)...

Leetcode 387. First Unique Character in a String

Problem Given a string s, find the first non-repeating character in it and return its index. If it does not exist, return -1. Algorithm Use two lists: one list is used to count the letters in “s”; the other list is the position where the letter first …...

c++ 自己实现一个迭代器

具体代码 /*自定义迭代器的实现 */ #include <iostream> using namespace std; class num {int val; //具体的数字int length; //数字的位数void calculate_length(){if(val/100){ //这个数字只有1位length1;return;}int x10; //这里就是不断重复除直…...

HarmonyOS NEXT应用开发—图片压缩方案

介绍 图片压缩在应用开发中是一个非常常见的需求&#xff0c;特别是在处理用户上传图片时&#xff0c;需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例中以jpeg图片为例介绍如何通过packing和scale实现图片压缩到目标大小以内。 效果图预览 使用说明…...

深入理解nginx的请求限速模块[下]

目录 3. 源码分析3.1 配置指令3.1.1 limit_req_zone指令3.1.2 limit_req指令3.1.3 limit_req_dry_run指令3.1.4 limit_req_log_level指令3.1.5 limit_req_status指令3.2 模块初始化3.3 请求处理3.3.1 ngx_http_limit_req_handler3.3.1 ngx_http_limit_req_lookup3.3.2 ngx_http…...

王者归位:Kafka控制器组件解析

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 王者归位&#xff1a;Kafka控制器组件解析 前言控制器组件简介控制器组件的定义和作用&#xff1a;为什么控制器是分布式系统的核心&#xff1f; 保存了什么数据控制器的指定和切换故障转移控制器故障…...

XmlHttpRequest responseType: ‘stream‘ 图片代理服务器

它是一个存在于原生 XMLHttpRequest 对象中的属性。在 Web API 中&#xff0c;XMLHttpRequest 对象用于发送 HTTP 或 HTTPS 请求到服务器&#xff0c;并接收响应。responseType 属性就是用来指定预期从服务器返回的响应数据的类型。 默认值 responseType的默认值为json&#x…...

手写 UE4中的 TArray

#pragma once #include<iostream> #include<stdexcept> #define CHECK_INDEX_RANGE(Index) if (Index > ElementCount) throw std::out_of_range("索引超出界限")template<typename ElementType> class TArray {typedef unsigned int uint; pri…...

seo如何优化排名/windows优化大师使用方法

UILabel 能显示文字&#xff0c;不能直接通过addTarget...方法监听点击1. 常见属性 property(nonatomic,copy) NSString *text; 显示文字property(nonatomic,retain) UIFont *font; 显示字体 default is nil (system font 17 plain)property(nonatomic,retain) UIColor *textC…...

做网站的公司挣钱吗/都有什么推广平台

UISegmentedControl分段控件代替了桌面OS上的单选按钮。不过它的选项个数非常有限&#xff0c;因为你的IOS设备屏幕有限。当我们需要使用选项非常少的单选按钮时它很合适。 一、创建 UISegmentedControl* mySegmentedControl [[UISegmentedControl alloc]initWithItems:nil]…...

2024年1月流感情况/seo和点击付费的区别

这款VR一体机内置了与主流智能手机相当的配置。 在昨日拉开帷幕的IFA 2016展会上&#xff0c;香港TCL旗下通讯品牌阿尔卡特&#xff08;Alcatel&#xff09;推出了一款名为Alcatel Vision的VR头显。这款VR头显不需要手机或电脑的驱动&#xff0c;是一款真正意义上的VR一体机。 …...

wordpress图片上传到哪里/搜索引擎谷歌入口

...

独立站是b2b还是b2c/百度客服电话人工服务热线

在网页布局中&#xff0c;使用float有不少好处&#xff0c;可以为你带来更加自由的布局&#xff0c;还可以自动根据浏览器改变布局效果。但是使用多了你也可能发现有一个问题&#xff0c;使用了float之后&#xff0c;外层的div不会撑高&#xff0c;导致布局出现坍塌。这里有一个…...

移动网站源码/品牌推广策划方案

Spring DI可以注入普通属性&#xff0c;但是像Date类型的就无法被识别。这时可以通过扩展Spring的属性编辑器把配置文件中的字符串转化成相应的对象进行注入。 Spring有自带的属性编辑器&#xff0c;我们也可以写自定义的属性编辑器 自定义属性编辑器&#xff1a; 继承java.bea…...