javascript - 使用 material-ui 无法在 radioGroup 中触发 onChange

Question

我正在使用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);

但是，可以使用此代码检查不同的选项，并且根据单选按钮，正常行为只能检查一个选项。我发现了一个类似的问题，并尝试根据答案更新我的代码，但它不起作用，因为在我的情况下，该handleChange函数没有被调用，我不知道为什么？

标签： javascriptreactjsreduxmaterial-ui

Answer 1

从您提供的链接中我可以理解，您可以尝试以下操作：

1. 添加以下功能组件：

   const FormControlLabelWrapper = props => {
   const { index, option, ...labelProps } = props;
         return (
           <FormControlLabel
             key={index}
             control={<Radio color="secondary" />}
             label={option}
             value={index + 1}
             labelPlacement="end"
             {...labelProps}
           />
         );
       };
   

2. 改成currentQuestion.options.map下面的代码

   {currentQuestion.options.map((option: string, index: number) => 
   (<FormControlLabelWrapper
     option={option}
     index={index}
    />))}