React on Change只起作用一次

Question

我正试图从react引导程序中重新创建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;

按钮无线电.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)

为什么会发生这种情况，我该如何解决？我已经在谷歌上找到了一些东西，但对我的案子没有用处。

Answer 1

所以我认为您的主要问题是使用onChange而不是onClick。

这里有点返工，如果这有什么用的话，可以向你展示我改变了什么https://stackblitz.com/edit/react-ts-queeta?file=Hello.tsx