Question

对于我的实习，我必须创建一个函数，该函数在多个答案中选择一个答案，并将问题空白替换为所选答案。

例如：

____您几岁了？
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的高手，而Hooks使用的是另一种写作方式，所以我有些困惑。但是我认为，对于这种情况，最好使用Hooks。你觉得呢？

第二，我认为要能够执行我的功能，我首先需要能够选择所选的答案，然后用它替换空白的问题空间，对吧？

因此，我尝试了几项没有成功的事情。我什至找到了这个解决方案（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测验应用程序将用选定的答案代替空白问题。所以我开始想也许不可能吗？你觉得呢？

我感谢大家阅读了我的文章，直到这里为止，我希望有人可以对我的问题有所帮助。无论哪种方式，请先谢谢。

如何在几个答案中选择一个答案，并用所选答案替换空白？已关闭

0 个答案: