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

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


const handleOpen = () => {
  Modal.confirm({
    title: `是否申请解锁经办人姓名`,
    content: (
      <div className={styles.bz}>
        备注:
        <Input
          onChange={(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}>
          备注:
          <Input
            onChange={(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的引用,可以解决在确认框中无法获取到最新值的问题。

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值