ReactonChange只作業一次

我正在嘗試從 react-bootstrap 重新創建 ToggleButtonGroup 和 ToggleButton 的功能。

這是我的組件：

import { useState } from 'react';
import ButtonRadio from "PointAndClick/components/ButtonRadio";
import { useSelector } from 'react-redux';
import { RootState } from '../../features/store';
import '../css/GameAnswers.css';
import GameImage from '../components/GameImage';

type GameAnswersProps = {
    setFinishedGame: Function
}

function GameAnswers(props: GameAnswersProps) {
    const gameAnswers = useSelector((state: RootState) => state.GameDataReducer.gameAnswers);    
    const gameImages = useSelector((state: RootState) => state.GameDataReducer.gameImages);
    const correctAnswer = useSelector((state: RootState) => state.GameDataReducer.correctAnswers);
    const gameQuestion = useSelector((state: RootState) => state.GameDataReducer.gameQuestion);
    
    const [selectedAnswer, setSelectedAnswer] = useState("");
    let iconAnswer = "";

    const handleAnswerChange = function (e: React.ChangeEvent<HTMLInputElement>) {
        console.log(e.target);
        setSelectedAnswer(e.target.value);
    }

    const determineButtonVariant = function (answer: string) {
        if (answer !== selectedAnswer) {
            return "primary";
        } else if (answer === correctAnswer) {
            props.setFinishedGame(true);
            iconAnswer="check";
            return "success";
        } else {
            props.setFinishedGame(false);
            iconAnswer="times";
            return "danger";
        }
    }

    return (
        <div className="game-answers">
            {
            gameImages === undefined &&
                    <GameImage 
                    className="game-details-image" 
                    images={[{ imgSrc: gameQuestion, imgAlt: 'test' }]} />
            }
            <div className="btn-group btn-group-custom">
                {gameAnswers.map(function (answer, index) {
                    return <ButtonRadio
                            id={answer}
                            value={answer}
                            onChange={handleAnswerChange}
                            className={`btn btn-${determineButtonVariant(answer)}${gameImages !== undefined ? "btn-img" : ""}`}
                        >
                        {gameImages !== undefined && 
                        <GameImage 
                        className="game-answers-image"
                        images={[{ imgSrc: gameImages[index], imgAlt: 'test' }]} />
                    }
                            {iconAnswer !== "" && determineButtonVariant(answer) !== "primary" ? 
                            <i className={`fa fa-${iconAnswer} fa-${iconAnswer}-custom`}/> :
                            ""
                            }
                            {answer}
                        </ButtonRadio>
                })}
            </div>
        </div>
    );
}

export default GameAnswers;

ButtonRadio.tsx

import "../css/Button.css";

type ButtonRadioProps = {
    className: string,
    children: React.ReactNode,
    name: string,
    id?: string,
    value?: string,
    onChange?: any
}

function ButtonRadio(props: ButtonRadioProps)
{
    return (
        <>
        <input
        type="radio" 
        id={props.id}
        value={props.value}
        className="btn-check"
        onChange={props.onChange}
        autoComplete="off"
        />
        <label 
        className={props.className}
        htmlFor={props.id}
        role="button"
        tabIndex={0}
        >
        {props.children}
        </label>
        </>
    );
}

export default ButtonRadio;

當我使用 react-bootstrap 時，唯一的區別是回傳函式如下所示：

return (
        <div className="game-answers">
            {
                gameImages === undefined &&
                    <GameImage 
                    className="game-details-image" 
                    images={[{ imgSrc: gameQuestion, imgAlt: 'test' }]} />
            }
            <ToggleButtonGroup type="radio" name="answers" className="btn-group-custom">
                {gameAnswers.map(function (answer, index) {
                    return <ToggleButton
                            id={answer}
                            value={answer}
                            onChange={handleAnswerChange}
                            variant={determineButtonVariant(answer)}
                            bsPrefix={gameImages !== undefined ? "btn-img" : ""}
                        >
                        {gameImages !== undefined && 
                        <GameImage 
                        className="game-answers-image"
                        images={[{ imgSrc: gameImages[index], imgAlt: 'test' }]} />
                    }
                            {iconAnswer !== "" && determineButtonVariant(answer) !== "primary" ? 
                            <i className={`fa fa-${iconAnswer} fa-${iconAnswer}-custom`}/> :
                            ""
                            }
                            {answer}
                        </ToggleButton>
                })}
            </ToggleButtonGroup>
        </div>
    );

一切正常。

現在我嘗試自己做（帖子中的第一段代碼）并且它可以作業，但只是部分作業。

onChange 事件僅在每個按鈕上呼叫一次。

例子：

I click on answer1: onChange called
I click on answer2: onChange called
I click on answer1 again: onChange isn't called anymore (I expected it to be called again)

為什么會發生這種情況，我該如何解決？我已經在谷歌上找到了一些東西，但對我的情況沒有用。

uj5u.com熱心網友回復：

所以我認為您的主要問題是由于您使用 onChange 而不是 onClick。

如果這對向您展示我更改的內容有用，請在這里進行一些返工 https://stackblitz.com/edit/react-ts-queeta?file=Hello.tsx

標籤：javascript 反应 打字稿

上一篇：無法映射陣列并獲取ScreenReactNative上的值

下一篇：關于SvelteComponent中TS2322錯誤的問題