Как выбрать ответ из нескольких ответов и заменить бланк вопроса выбранным ответом?закрыто - PullRequest
Новая
       5

Как выбрать ответ из нескольких ответов и заменить бланк вопроса выбранным ответом?закрыто

0 голосов
/ 04 марта 2019

Для моей стажировки мне нужно создать функцию, которая выбирает ответ из нескольких ответов и заменяет пустой вопрос выбранным ответом.

Например:

Сколько лет ____ вам?
a) b) есть c) иметь d) ничего

Если пользовательнажимает на a) ответ, он заменяет ____ в вопросе.

Таким образом, конечный результат будет таким:

Сколько вам лет?
a) b)c) иметь d) ничего

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

Итак, вот компонент, с которым я хочу работать: 

// DisplayQuizz.jsx

const DisplayQuizz = ({test}) => {
  const questions = test.questionElements.map(questionElement => <span key={questionElement.id}>{questionElement.questionElement} </span> )
  const displayReponses = test.reponses.map(reponse => <MDBBtn className='response' key={reponse.id}>{reponse.reponse} </MDBBtn>)

  return (
    <div className="DisplayTest">
      <MDBCardTitle className= 'superclasse'>
        {test.constat}
      </MDBCardTitle>
      <MDBCardTitle className= 'super'>{test.instruction}</MDBCardTitle>
      <MDBCardText className='question'>{questions}</MDBCardText>
      <MDBCardText className='reponse' >{displayReponses}</MDBCardText>
    </div>
  );
}

export default DisplayQuizz;

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

A) Я создаю компонент класса вместо своего функционального компонента.Тем не менее, то, что мне нужно использовать, чтобы сделать мою функцию, будет в рендере, и мне это нужно до рендеринга.

B) Я добавляю хуки к своему компоненту.Но поскольку Hooks - это новая вещь, не так уж много документации, чтобы помочь мне.Более того, поскольку я программировал менее года с React и без него, я еще не являюсь мастером React, и Хукс использует другой вид письма, поэтому я немного запутался.Но я думаю, для этого случая лучше использовать крючки.Как вы думаете?

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

Итак, я попробовал несколько вещей без успеха.Я даже нашел это решение (https://stackblitz.com/edit/react-quiz-app?file=App.js), что-то вроде того, что я хочу сделать, но я не знаю почему, я не могу понять, как это работает. Кроме того, я думаю, что самая большая проблема заключается в том, как вызвать илиполучить только один ответ и не все из функции карты.

Вот что я делал до сих пор: 

import React, { useState, useEffect  } from 'react';

const DisplayQuizz = ({test}) => {
  const questions = test.questionElements.map(questionElement => <span key={questionElement.id}>{questionElement.questionElement} </span> )
  const displayReponses = test.reponses.map(reponse => <MDBBtn className='response' key={reponse.id}>{reponse.reponse} </MDBBtn>)
  const [isSelected, setSelected] = useState(true);

  function useAnswerSelected() {
    setSelected(prevState => ({
      isSelected: !prevState.isSelected,
    }));

    getAnswer()
    console.log("Bien joué", isSelected);
  }

  function getAnswer() {
    if (isSelected === true) {
      const selectedAnswer = test.reponses.map((reponse, id) => {
        return (
          <li key={id} onClick={() => useAnswerSelected(reponse.reponse)}>
          </li>,
          console.log(reponse.reponse, id)
        );
      });
    }
  }

  return (
    <div className="DisplayTest">
      <MDBCardTitle className= 'superclasse'>
        {test.constat}
      </MDBCardTitle>
      <MDBCardTitle className= 'super'>{test.instruction}</MDBCardTitle>
      <MDBCardText className='question'>{questions}</MDBCardText>
      <MDBCardText className='reponse' onClick={() => getAnswer()} >
        {displayReponses}
      </MDBCardText>
    </div>
  );
}

export default DisplayQuizz;

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

Наконец, когда я искал какое-то решение в Интернетечтобы помочь мне, я не увидел ни одного приложения викторины React, которое бы заменяло вопрос с пустым пространством на выбранный ответ. Поэтому я подумал, может быть, это невозможно? Как вы думаете?

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

...