React动态进度条实现问询：基于已选问题更新进度值

Hey there! Let's get that progress bar updating correctly based on how many quiz questions the user has answered. Here's a step-by-step breakdown of how to implement the handleProgress function and related logic:

1. Track Selected Answers with State #

First, you need a state variable to keep track of which answers the user has selected for each question group. We'll use an object where each key corresponds to a unique question identifier (like q1, q2) and the value is the selected option:

import { useState } from 'react';

function YourQuizComponent() {
  // Track selected answers: key = question ID, value = selected option
  const [selectedAnswers, setSelectedAnswers] = useState({});
  // Track progress percentage (ranges from 0 to 100)
  const [progress, setProgress] = useState(0);

  // ... rest of your component code
}

2. Update Selected Answers on User Choice #

Make sure each radio button group has a unique name attribute (e.g., name="q1" for the first question). Then create a handler to update the selected answers state whenever a user picks an option:

const handleAnswerSelect = (e) => {
  const { name, value } = e.target;
  // Update the answers object with the new selection
  setSelectedAnswers(prevAnswers => ({
    ...prevAnswers,
    [name]: value
  }));
  // Trigger progress update right after selecting an answer
  handleProgress();
};

Bind this handler to each radio button's onChange prop, like:

<input
  type="radio"
  name="q1"
  value="option1"
  onChange={handleAnswerSelect}
/>

3. Implement the handleProgress Function #

This function will calculate how many questions have been answered, then convert that count to a percentage for the progress bar:

const handleProgress = () => {
  // Count how many questions have a valid selected answer
  const completedCount = Object.values(selectedAnswers).filter(answer => answer).length;
  // Calculate progress percentage (total questions = 4)
  const progressPercent = (completedCount / 4) * 100;
  // Update the progress state to refresh the bar
  setProgress(progressPercent);
};

4. Render the Dynamic Progress Bar #

Use the progress state to update the visual bar. Here's a simple CSS-based example with smooth animation:

<div style={{ width: '100%', height: '20px', backgroundColor: '#eee', borderRadius: '10px' }}>
  <div 
    style={{ 
      width: `${progress}%`, 
      height: '100%', 
      backgroundColor: '#4CAF50', 
      borderRadius: '10px',
      transition: 'width 0.3s ease' // Smooth progress transition
    }}
  />
</div>

Key Tips #

• Each question group must have a unique name so the selectedAnswers object can correctly map answers to their respective questions.
• The filter(answer => answer) check ensures we only count questions where the user has actually made a selection (empty values are ignored).
• The transition CSS property makes the progress bar update feel responsive and polished.

This setup will automatically refresh the progress bar every time the user selects an option, showing exactly how much of the quiz they've completed.

内容的提问来源于stack exchange，提问作者Elder