Блог

В настоящее время у меня есть индикатор выполнения, созданный в CSS, с шириной в процентах. Если я хочу увеличить размер ширины, как мне лучше всего это сделать? В функции handleNextButtonClick() вы можете увидеть, как я это сделал. Проблема в том, что невозможно добавлять постепенно, из-за px .

 const Quiz = () => {
  let answer = 0;
  const [value, setValue] = useState(1);
  const [score, setScore] = useState(0);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [width, setWidth] = useState(0);
  const [showScore, setShowScore] = useState(false);

  const onChange = (e) => {
    console.log('qustion checked', e.target.value);
    setValue(e.target.value);
  };

  const handleNextButtonClick = () => {
    const nextQuestion = currentQuestion   1;
    const scoreValue = score   1;
    if (nextQuestion < Questions.length) {
      if (value === Questions[currentQuestion].answer) {
        setScore(scoreValue);
        setCurrentQuestion(nextQuestion);
      } else {
        setCurrentQuestion(nextQuestion);
      }
    } else {
      setShowScore(true);
      console.log(score);
    }

    var progressBar = document.getElementById('main');
    const currentWidth = width   600 / Questions.length   'px';
    setWidth(currentWidth);
    progressBar.style.width = currentWidth;
    console.log(currentWidth);
    // const updateProgress = currentProgress   (100/Questions.length)
    // setCurrentProgress(updateProgress);
  };

  return (
    <div className="QuizBox">
      {showScore ? (
        <h1>
          Du fik {score} ud af {Questions.length}
        </h1>
      ) : (
        <>
          <div className="Header">Cybersikkerheds Quiz</div>
          <Row>
            <Col span={23}>
              <ProgressBar />
              <div className="Question">{Questions[currentQuestion].questionText}</div>
              <Radio.Group onChange={onChange} value={value} buttonStyle="solid">
                {Questions[currentQuestion].answerOptions.map((item) => {
                  return (
                    <Radio.Button key={item.answerText} value={answer  }>
                      {item.answerText}
                    </Radio.Button>
                  );
                })}
                <Button onClick={() => handleNextButtonClick()} type="primary">
                  Næste
                </Button>
              </Radio.Group>
            </Col>
          </Row>
        </>
      )}
    </div>
  );
};

export default Quiz;
 

Пусть значение width остается числом и добавляется 'px' при настройке свойства ширины панели прогресса:

 const currentWidth = width   600 / Questions.length;
setWidth(currentWidth);
progressBar.style.width = currentWidth   'px';