क्लिक जो चलाता है एक प्रस्तुत करना के बाद प्रकाश डाला रहने के लिए बटन प्राप्त करने की कोशिश

वोट
0

मैं एक सर्वेक्षण के निर्माण कर रहा हूँ और अभी मैं एक घटक है कि शर्तों के साथ सवालों की एक सरणी लेता है और एक सवाल तो एक क्लिक उपयोगकर्ता से निम्नलिखित के आधार पर करता है, तो स्थिति उत्पन्न होने पर अगले प्रश्न renders renders है। जब जवाब बटनों में से एक क्लिक किया जाता है (क्यू 1 के लिए कहते हैं) यह उपयोगकर्ता उत्तर चुन लिए उजागर करने के लिए सीएसएस फोकस का उपयोग कर रंग बदल जाता है, मुद्दा यह है कि जब अगले प्रश्न प्रकट होता है (जैसे कि Q2) और अगले जवाब से हाइलाइटिंग क्लिक किया जाता है है पहले सवाल डिफ़ॉल्ट रिटर्न का जवाब और केवल दूसरे सवालों के जवाब देने पर प्रकाश डाला गया है।

वहाँ चयनित सभी जवाब सीएसएस का उपयोग कर प्रकाश डाला या मैं घटक खुद को परिवर्तन करने की आवश्यकता होगी रखने के लिए एक रास्ता है।

अब तक कोड निम्नलिखित की तरह दिखता है

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