Попытка кнопки, чтобы остаться выделено после щелчка, который вызывает рендер

голоса
0

Я строй опроса и теперь у меня есть компонент, который принимает массив вопросов с условиями и визуализирует вопрос, то следующий щелчок от пользователя делает следующий вопрос, основываясь на случай, если условие выполнено. Когда одна из кнопок ответа щелкают (скажем, Q1) меняет цвет с помощью CSS фокус, чтобы выделить пользователю ответ выбран, вопрос в том, что, когда появляется следующий вопрос (скажем, Q2), а следующий ответ щелкнул выделение из первые вопросы, ответ возвращается по умолчанию и только вторые вопросы отвечают подсвечиваются.

Есть ли способ, чтобы держать все ответы, выбранные выделены с помощью CSS или мне придется вносить изменения в самом компонент.

До сих пор код выглядит следующим образом

const QuestionBox = ({ question, answer, onSelect }) => {
  const { questions, answers } = question;
  return (
    <div>
      <p>
        {question.question}
        <br/>
        {answers.map((text, index) => (
          <button
            className='questionBtns'
            key={index}
            onClick={() => {
              onSelect(text);
            }}
          >
            {text}
          </button>
        ))}
      </p>
    </div>
  );
};
export default QuestionBox;

class Survey extends Component {
   state = {
      answers: {};
   };

   render() {
     return (
       <div>                 
          {questions.map(question => (
              <QuestionBox
                  question={question}
                  answer={this.state.answers[question.questionId]}
                  key={question.questionId}
                  onSelect={answer => {
                       const answers = {
                            ...this.state.answers,
                            [question.questionId]: answer,
                   };
                  this.setState({ answers });
                 }}
                />
            ))}                       
          </div>
Задан 09/10/2019 в 12:55
источник пользователем
На других языках...                            


1 ответов

голоса
0
// Question box should only know these things:
// 1. a single question
// 2. choices for that question
//   - each choice should have an id and text
// 3. function to select one of the choices
// 4. previously selected choice

// I have renamed and restructured stuff which is better suited in this scenario

const QuestionBox = ({ question, choices, selectChoice, previouslySelectedChoiceID }) => {

    // if some choice is already selected, highlight the button
    const buttonStyleClass = previouslySelectedChoiceID ?  "some-hightlight-class" : "normal-class";

    return (
    <div>
      <p>
        {question}
        <br/>
        {choices.map(choice => (
          <button
            key={choice.id}
            onClick={() => {
                selectChoice(question.id, choice.id);
            }}
            className={buttonStyleClass}
          >
            {choice.text}
          </button>
        ))}
      </p>
    </div>
  );
};
export default QuestionBox;

//---------------------------------------------------
class Survey extends Component {
   state = {
      selectedChoices: [],
       // structure : 
      // [ { questionID : x, selectedChoiceID : y } ]
      questions: [], // assuming that questions are stored in state
      // structure : 
      // [ { id: x, text: x, choices: [ {id: y, text: z} ]}]
   };

   getSelectedChoiceForQuestionId = (questionID) =>{
        const {selectedChoices} = this.state;
        const index =  selectedChoices.findIndex( ch => ch.questionID === questionID) ;
        return selectedChoices[index].selectedChoiceID;
   }

   handleSelectChoice = (questionID, selectedChoiceID) => {
       const {selectedChoices} = this.state;
        const index = selectedChoices.findIndex(x => x.questionID === questionID);
        // if selection is done for the first time,
        if (index === -1){
            selectedChoices.push({questionID, selectedChoiceID}); // shorthand
        }
        // else change the selection to something else
        // if you only want the users to select once only, remove the else part
        else{
            selectedChoices[index].selectedChoiceID = selectedChoiceID;
        }

   }

   render() {
    const {questions} = this.state;
     return (
       <div>                 
          {questions.map(question => (
              <QuestionBox
                  question={question.text}
                  choices={question.choices}
                  previouslySelectedChoiceID={this.getSelectedChoiceForQuestionId(question.id)}
                  selectChoice={this.handleSelectChoice}
                  key={question.id}
                />
            ))}                       
          </div>
     )}

}
Ответил 09/10/2019 в 16:01
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more