Блог

У меня есть объект со свойством вопросов. вопросы — это массив из 13 объектов.У каждого объекта есть массив choices, содержащий 2-4 объекта, и у каждого объекта есть свойство isCorrect, которое имеет значение true или null.

Все мои вопросы отображаются. У меня есть кнопка, с помощью которой я хочу добавить имя класса к каждому правильному ответу, выбранному пользователем. У вас, ребята, есть какие-либо предложения о том, как я могу этого добиться?

 {quiz.questions.map((question, index) => (
   <ContentWrapper key={question._key}>
     <h3>
      {`${index   1}. `}
      {question.title}
     </h3>
     {question.choices.map(choice => (
       <ChoiceStyle id={"wrapper"   choice._key} key={choice._key}>
         <input
           type="radio"
           id={choice._key}
           name={question._key}
           onChange={updateScore}
           value={choice.isCorrect === null ? "0" : "1"}
            />
            <label htmlFor={choice._key}>{choice.title}</label>
          </ChoiceStyle>
        ))}

     <ButtonComponent
        type="button"
        buttonType="second"
        title="Sjekk svar"
        onClick={() => {
          calculateScore();
        }}
      />
 

Эта кнопка просто вычисляет результат, но мне может понадобиться добавить к этой кнопке другую функцию? Я также использую стилизованные компоненты

Для этого есть несколько подходов, самый простой и менее инвазивный способ — добавить троичное условие для отображения / скрытия имени класса на основе isCorrect свойства.

Я предполагаю, что quiz это состояние, которое изменяется в каждом onChange , чтобы обновить все изменения в тесте в реальном времени. На данный момент:

 {quiz.questions.map((question, index) => (
   <ContentWrapper key={question._key}>
     <h3>
      {`${index   1}. `}
      {question.title}
     </h3>
     {question.choices.map(choice => (
       <ChoiceStyle id={"wrapper"   choice._key} key={choice._key}>
         <input
           type="radio"
           id={choice._key}
           name={question._key}
           onChange={updateScore}
           className={`${choice.isCorrect ? 'is-valid':''}`}
           value={choice.isCorrect === null ? "0" : "1"}
            />
            <label htmlFor={choice._key}>{choice.title}</label>
          </ChoiceStyle>
        ))}

     <ButtonComponent
        type="button"
        buttonType="second"
        title="Sjekk svar"
        onClick={() => {
          calculateScore();
        }}
      />
 

Хитрость заключается в следующем троичном условии:

    className={`${choice.isCorrect ? 'is-valid':''}`}
 

Возникающая проблема заключается в том, что класс сразу же применяется. Я
не хочу, чтобы отображался правильный ответ, если пользователь не нажал
компонент button

Затем вам нужно будет добавить новое свойство к вашему choice объекту, чтобы проверить и поиграть с ним. Давайте предположим, что что-то вроде:

      const choice={
        key: "some key"
        isCorrect: true
        /// other fields
      }


 // more code
{quiz.questions.map((question, index) => (
   <ContentWrapper key={question._key}>
     <h3>
      {`${index   1}. `}
      {question.title}
     </h3>
     {question.choices.map(choice => (
       <ChoiceStyle id={"wrapper"   choice._key} key={choice._key}>
         <input
           type="radio"
           id={choice._key}
           name={question._key}
           onChange={updateScore}
           className={`${choice.isValid ? 'is-valid':'' }`}
           value={choice.isSelected === null ? "0" : "1"}
            />
            <label htmlFor={choice._key}>{choice.title}</label>
          </ChoiceStyle>
        ))}

     <ButtonComponent
        type="button"
        buttonType="second"
        title="Sjekk svar"
        onClick={() => {
          calculateScore();
        }}
      />
 

В каждом updateScore случае вам нужно будет проверить, правильный ли выбор и соответствует ли он вашей бизнес-логике, и добавить новое свойство ( isValid ) для его запуска.

 const updateScore =()=>{
   // some unknown logic

   // some validations and then:
   choice.isValid = true,
}
 

Поскольку (я предположил), что вы устанавливаете состояние quiz in React, новое свойство принудительно обновит состояние, применяя имя класса в пользовательских щелчках.