当前位置: 首页 > 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的引用,可以解决在确认框中无法获取到最新值的问题。

http://www.lryc.cn/news/321141.html

相关文章:

  • 2、鸿蒙学习-申请调试证书和调试Profile文件
  • 蓝桥杯算法基础(13):十大排序算法(希尔排序) (快速排序)c语言版
  • web学习笔记(三十二)
  • Android 地图SDK 绘制点 删除 指定
  • Nodejs 第五十八章(大文件上传)
  • Linux编译器--gcc/g++的使用
  • 苍穹外卖-day13:vue基础回顾+进阶
  • 蓝桥杯/慈善晚会/c\c++
  • 2024.3.19
  • 【Python】新手入门学习:详细介绍单一职责原则(SRP)及其作用、代码示例
  • 【DataWhale学习笔记】使用AgentScope调用qwen大模型
  • 【C++】手撕AVL树
  • 探索 TorchRe-ID--基于 Python 的人员再识别库
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Flex)
  • tmux最基础的一点应用-不用一直挂着ssh,可以干点别的事情
  • Java推荐算法——特征加权推荐算法(以申请学校为例)
  • 探索什么便签软件好用,可以和手机同步的便签软件
  • 字符函数与字符串函数
  • Kubernetes 项目整体布局 el-container
  • AI赋能写作:AI大模型高效写作一本通
  • unraid docker.img扩容
  • Python 实现1~100之间的偶数求和
  • Leetcode 387. First Unique Character in a String
  • c++ 自己实现一个迭代器
  • HarmonyOS NEXT应用开发—图片压缩方案
  • 深入理解nginx的请求限速模块[下]
  • 王者归位:Kafka控制器组件解析
  • XmlHttpRequest responseType: ‘stream‘ 图片代理服务器
  • 手写 UE4中的 TArray
  • Flink实时写Hudi报NumberFormatException异常