我正在使用 RadioButton
组件在我创建的组件中显示问题的不同选项:
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Grid from "@material-ui/core/Grid";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup/RadioGroup";
import Typography from "@material-ui/core/Typography";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import SyntaxHighlighter from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
import { Dispatch } from "redux";
import { incrementQuestion, IQuestion, questionRequest } from "../../actions/index";
import ContentQuiz from "../../components/ContentQuiz";
import history from "../../history/history";
interface IProps {
currentQuestionNumber: number;
loadingData: boolean;
questions: IQuestion[];
questionRequest: () => void;
incrementQuestion: (arg: number) => void;
numberOfQuestions: number;
}
const Quiz = (props: IProps) => {
const { currentQuestionNumber,
loadingData,
questions,
questionRequest,
incrementQuestion,
numberOfQuestions } = props;
const [answerOption, setAnswerOption] = useState(1);
useEffect(() => {
questionRequest();
}, [questionRequest]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setAnswerOption(Number((event.target as HTMLInputElement).value));
};
const handleNextQuiz = () => {
if (currentQuestionNumber === numberOfQuestions - 1) {
history.push("/homepage");
} else {
incrementQuestion(answerOption);
history.push("/contentQuiz");
}
};
const currentQuestion = questions[currentQuestionNumber];
return (
<div>
{loadingData ? ("Loading ...") : (
< ContentQuiz
questionNumber={currentQuestionNumber + 1}
handleClick={handleNextQuiz} >
<div>
<Typography variant="h3" gutterBottom> What's the output of </Typography>
<>
<SyntaxHighlighter language="javascript" style={dark} >
{currentQuestion.description.replace(";", "\n")}
</SyntaxHighlighter >
<Grid container direction="column" alignItems="baseline">
<Grid>
<FormControl component="fieldset">
<RadioGroup
name="option"
value={answerOption}
onChange={handleChange}>
{currentQuestion.options.map((option: string, index: number) => (
<FormControlLabel
key={index}
control={<Radio color="secondary" />}
label={option}
value={index + 1}
labelPlacement="end"
/>))
}
</RadioGroup>
</FormControl>
</Grid>
</Grid>
</>
</div >
</ContentQuiz >
)}
</div>
);
};
const mapStateToProps = (state: any) => {
const { currentQuestionNumber, loadingData, questions, numberOfQuestions } = state.quiz;
return {
currentQuestionNumber,
loadingData,
questions,
numberOfQuestions
};
};
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
incrementQuestion: (answer: any) => dispatch<any>(incrementQuestion(answer)),
questionRequest: () => dispatch<any>(questionRequest())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Quiz);
但是,可以使用此代码并根据Radio buttons检查不同的选项。正常行为只能检查一个选项。
我找到类似的question并尝试根据答案更新我的代码,但它不起作用,因为在我的情况下,未调用 handleChange
函数,我不知道为什么?
最佳答案
正如我从 link 中了解到的那样根据您提供的信息,您可以尝试以下操作:
添加以下功能组件:
const FormControlLabelWrapper = props => { const { index, option, ...labelProps } = props; return ( <FormControlLabel key={index} control={<Radio color="secondary" />} label={option} value={index + 1} labelPlacement="end" {...labelProps} /> ); };
将
currentQuestion.options.map
更改为以下代码{currentQuestion.options.map((option: string, index: number) => (<FormControlLabelWrapper option={option} index={index} />))}
关于javascript - 无法在带有 Material-ui 的 radioGroup 中触发 onChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58258667/