如何更改反应组件中 useRef 对象中保存的按钮的 onClick 函数？

Question

我正在学习 React 中的状态和钩子。我正在做一个练习，使用 deckofcardsAPI 从一副牌中发牌，这不是互联网上最重要的代码，但它确实带来了一个问题。事实上，这甚至不是练习的一部分，我只是很想做。

我有一个存储在 useRef 对象中的按钮。我真的很想改变 onClick 功能，但我不知道该怎么做。

import React, { useState, useEffect, useRef } from "react";
import axios from 'axios';

// auto dealer, 1 card/s turned on or off

function CardTable2() {

    const [src, setSrc] = useState('');
    const deckId = useRef();
    const remaining = useRef(52);
    const isDealing = useRef(false);
    const timerId = useRef();
    const button = useRef();

    useEffect(() => {
        timerId.current = setInterval(() => {
            if (isDealing.current) {
                dealCard();
            };
        }, 1000);

        async function createDeck() {
            const res = await axios.get(`http://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1`);
            deckId.current = res.data.deck_id;
        };
        createDeck();

        return () => { clearInterval(timerId.current) }
    }, []);

    async function dealCard() {
        if (remaining.current === 0) {
            alert('You are out of cards');
            isDealing.current = false;
            button.current.innerText = "Shuffle deck";
            button.current.onClick = shuffleDeck;
            return;
        }
        console.log(button);
        const res = await axios.get(`http://deckofcardsapi.com/api/deck/${deckId.current}/draw/?count=1`);
        remaining.current = res.data.remaining;
        setSrc(res.data.cards[0].image);
    };

    async function shuffleDeck() {
        const res = await axios.get(`http://deckofcardsapi.com/api/deck/${deckId.current}/shuffle/`);
        setSrc('');
        button.current.innerText = "Start dealing cards";
        button.current.onClick = toggleDealing;
    }

    function toggleDealing() {
        isDealing.current = !isDealing.current;
        button.current.innerText = "Start dealing cards";
    };


    return (
        <>
            <button onClick={toggleDealing} ref={button}>{isDealing.current ? "Stop dealing cards" : "Start dealing cards"}</button>
            <div>
                <img className="CardBox" src={src} alt="a card" />
            </div>
        </>
    )
};

export default CardTable2;

我已经尝试将 button.current.onClick 设置为函数，如上所示，但它实际上似乎没有效果。我错过了什么吗？

Answer 1

我认为发生的事情是 return 每次都在退回 {toggleDealing}。

为什么不去掉 ref 而只用一个通用函数来处理这两种情况？

const [buttonMode, setButtonMode] = useState("shuffle")

function handleClick() {
    if (buttonMode === "deal") {
        deal()
    } else if (buttonMode === "shuffle") {
        shuffle()
    } 
}

如何更改反应组件中 useRef 对象中保存的按钮的 onClick 函数？

How can I change the onClick function of a button saved in a useRef object in a react component?

javascript

reactjs

react-hooks

use-ref