Încercarea de a obține buton pentru a rămâne evidențiate după ce faceți clic pe care declanșează o face

voturi
0

Construiesc un sondaj și chiar acum am o componentă care are o serie de întrebări cu condiții și redă o întrebare urmând apoi un clic de utilizator face următoarea întrebare în funcție de cazul în care este îndeplinită condiția. Când unul dintre butoanele de răspuns este apasat (spune pentru Q1) se schimba culoarea folosind focalizarea css pentru a evidenția pentru utilizator răspunsul ales, problema este că, atunci când apare următoarea întrebare (să zicem Q2) și răspunsul următor se dă clic pe evidențierii din primele întrebări să răspundă revine la valorile implicite, doar a doua întrebare răspunsul este evidențiată.

Există o modalitate de a păstra toate răspunsurile selectate evidențiate folosind css sau va trebui să mă face modificări la componenta în sine.

Până în prezent, codul arată următoarele

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>
Întrebat 09/10/2019 la 12:55
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
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>
     )}

}
Publicat 09/10/2019 la 16:01
sursa de către utilizator

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