React Slide Animation 在 unmountOnExit 上删除选定的值

Question

我遇到了一个问题，单击单选按钮时下一个问题是使用幻灯片动画，但是在退出时卸载之前选择的单选按钮值也被取消选择。如何防止这种情况发生。

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 和上一个按钮的功能。请帮忙解决这个问题。

Answer 1

先前单选按钮值不持久的主要原因是因为您没有使用更新值更改 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);

但是您的代码还有其他不一致之处，我为您做了一个 code sample 并带有注释。

React Slide Animation 在 unmountOnExit 上删除选定的值

React Slide Animation removing selected value on unmountOnExit

animation

slide

reactjs

material-ui