React将子组件的方法暴露给父组件,由父组件控制是否调用或停止倒计时按钮

之前遇到过的一个需求,子组件的倒计时按钮需要让父组件控制是否调用或停止,记录下。

如果要将子组件暴露给父组件,我们要用到react中的forwardRef以及useImperativeHandle这两个API

import React, { useImperativeHandle, forwardRef, useState, useEffect } from 'react';
// 计时器 必须声明在组件外部 在内部会一直循环
let timeChange;

const ChildrenModel = forwardRef((props, ref) => {
    // 按钮计时
    const [time, setTime] = useState(60);
    // 按钮状态
    const [btnState, setBtnState] = useState(false);
    // 通过useImperativeHandle将自身方法暴露给父级
    useImperativeHandle(ref, () => ({
        start
    }))

    // 开始计时
    const start = () => {
        // 避免计时重复 先清除
        clearInterval(timeChange);
        // 使用--t t-1会闭包
        timeChange = setInterval(() => setTime(t => --t), 1000);
        // 当计时开始 按钮状态为不可点击
        setBtnState(true);
    }

    // 组件注销时,移除计时器
    useEffect(() => {
        return () => clearInterval(timeChange);
    }, [])

    useEffect(() => {
        // 监听计时结束 清除计时器 重新赋值 恢复按钮
        if (time <= 0) {
            clearInterval(timeChange);
            setTime(60);
            setBtnState(false);
        }
    }, [time])

    return (
        <div>
            <h1>将方法暴露给父组件</h1>
            <button
                disabled={btnState}
                style={{ height: "36px", width: "200px", textAlign: "center", display: "block", margin: "0 auto" }}
            >{time === 60 ? "点击倒计时" : `${time}秒后点击`}</button>
        </div>

    )
})

子组件写好,接下来就是父组件直接调用就可以了

import React, {useRef, useState } from 'react';
import ChildrenModel from './Children/Children';

export default function Section() {
    // 子组件绑定Ref
    const childRef = useRef();
    // 点击父组件 调用子组件方法
    const childMethod = () => {
        // 通过子组件绑定的ref 来操作方法
        childRef.current.start();
    }

    return (
        <div className='main'>
            <button onClick={childMethod}>父组件按钮</button>
            <ChildrenModel ref={childRef}></ChildrenModel>
        </div>
    )
}

OKOKOK!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值