反應幻燈片影片洗掉unmountOnExit上的選定值

我遇到了一個問題，單擊單選按鈕時，下一個問題使用幻燈片影片，但在退出時卸載先前選擇的單選按鈕值也被取消選擇。如何防止這種情況發生。

const Quiz = (props) => {
     const {questions, quiz, options} = useSelector((state) => state.quiz);
  
    const [user, setuser] = useState("");
    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [checked, setChecked] = useState(true);  
    const [option, setOptions] = useState("");
    
    const dispatch = useDispatch();
    const history = useHistory();

 const handleRadioChange = (number, event) => {
  
    let currentSelection = questions.find(question => question.number === number);
    console.log(currentSelection   "radio selected");
    currentSelection.value = event.target.value;
  
    questions[currentQuestion].value = event.target.value;
   
    console.log(questions[currentQuestion].value   "value added");
    setCurrentQuestion((current) => {
      return Math.min(
        current   1,
        questions.length - 1
      );
    });
      setChecked((previousState) => !previousState);
      setTimeout(() => { 
        setChecked(previousState => ({
             afterPreviousChange: previousState.previousChange 
           }))
      }, 1000);
    
};


    const previousQuestion = (event) => {
        event.preventDefault();
        let new_current_questions = Math.max(currentQuestion - 1, 0);
        setCurrentQuestion(new_current_questions);
        setChecked((previousState) => !!previousState);
       const a =  setTimeout(() => { 
          setChecked(previousState => ({
               afterPreviousChange: previousState.previousChange 
             
             }))
        }, 1000);
       
      };
 function handleSubmit(event) {
        event.preventDefault();     
        const valid = questions.some((q) => !q.value);
        console.log(valid   "questionsalpha");
        if (!valid) {
            dispatch(postQuiz({ responses: questions, id: quiz.id }, history));
        }
        setChecked((previousState) => !previousState);
        const a =  setTimeout(() => {                
            setChecked((previousState) => !previousState);   
            setCurrentQuestion(0);
              },1000);};
    return(

      <Slide direction="up"  
        in={checked} 
        appear={true} 
        mountOnEnter 
                 unmountOnExit
        timeout={{ enter: 1000 , exit: checked ? 1 : 900}}
    >   
            <Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
                <CardContent>
    
                <form onSubmit= {handleSubmit}>
                        <CardActions>
                      <Button type="submit" color="warning" variant="outlined" disabled={currentQuestion===0} className={classes.button} onClick={previousQuestion}>
                          Previous</Button>
                      </CardActions>              
                      <FormControl component='fieldset' className={classes.formControl}
        data-hidden={questions[currentQuestion].number !==
          currentQuestion[questions[currentQuestion].number]} >
        <FormLabel component='legend'>
          {questions[currentQuestion].question}
        </FormLabel>
        <FormLabel component='legend'>
          {questions[currentQuestion].description}
        </FormLabel>
        <RadioGroup
          aria-label='quiz'
          name='quiz'
          defaultValue={' '}
          value={questions[currentQuestion].value}
          checked={checked}
          onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
          sx={{
            color: pink[800],
            '&.Mui-checked': {
              color: blue[600],
            },
          }}>
          {options.map((option) => (
            <FormControlLabel
              key={option.score}
              value={option.score}
              control={<Radio  sx={{
                color: pink[800],
                '&.Mui-checked': {
                  color: blue[600],
                },
              }}/>}
              label={option.label}
             
            />
          ))}
        </RadioGroup>
      </FormControl>
                        <CardActions>
                        <Button type="submit" variant="contained" color="primary" className={classes.button} disabled={currentQuestion<5} onClick={handleSubmit}>
                        Submit
                    </Button>
                  </CardActions>
                    </form>
                    </CardContent>
                    </Card>
                    </Slide>
      );

我也分享了使用 handleChange 和上一個按鈕的功能。請幫助解決這個問題。

uj5u.com熱心網友回復：

以前單選按鈕值不持久的主要原因是因為您沒有questions使用更新值更改狀態，您只是在更改物件本身。

錯誤具體在這里：

let currentSelection = questions.find(question => question.number === number);

console.log(currentSelection   "radio selected");

// HERE YOU ARE CHANGIG ONLY THE OBJECT, NOT THE ARRAY
currentSelection.value = event.target.value;
  
questions[currentQuestion].value = event.target.value;

一種方法是映射問題陣列，更改當前問題值，然后更新問題狀態：

const updatedQuestions = questions.map((item) => {
   if (item.number === currentQuestion) item.value = event.target.value;
      return item;
   });

setQuestions(updatedQuestions);

但是您的代碼也有其他不一致之處，我為您做了一個帶有注釋的代碼示例。

標籤：反应 动画 材料-ui 滑动

上一篇：如何將中心的邊框影片與文本對齊

下一篇：多個消費者不丟失訊息