Jestem studentem i na mój projekt jeden z moich funkcji jest quizem. Dostaję pytania z mojego zaplecza, wykonując ComponentDIdMount wewnątrz Quizcontainer, a następnie przekazując każde pytanie do Quizform jako rekwizyty. Wewnątrz Quizform Mam 5 przycisku radiowego dla każdego pytania, który reprezentuje szereg od silnie nie zgadzam się, aby zdecydować się zgodzić. Po ustawieniu Setstate wewnątrz elementu dziecka (Quizform) rejestruje tylko ostatnie wydarzenie OnClick i wysyła tylko to do rodzica. Myślę, że może to zrobić każde pytanie jako własne quizform, ale nie jestem pewien, jak zebrać wszystkie te dane wewnątrz rodzica (może jako stan rodzica, ale nie jestem pewien, jak pójdę że).

Oto kod w celach informacyjnych:

QuizContainer

state = {
        all: []
    }

    handleSubmit = (evt, quizObj) => {
        evt.preventDefault()
        this.setState = {
            all: [...this.state.all, quizObj]
        }
    }

 render() {
        return (
            <container className="quiz">
            <h5>For each of the following statements choose on a scale of 1 - 5, one strongly disagree and 5 being strongly agree, and 3 being neutral. </h5>
                <div> {this.props.questions.questions.map(question => <QuizForm question={question} key={question.id} handleSubmit={this.handleSubmit}/>)}
                    <input form="quiz-form" type="submit" value="Submit" />
                </div> 
            </container>
        )
    }

QuizForm

state = {
        question: [],
        answer: []
    }

    handleChange = (evt) => {
        let name = evt.target.name
        let value = evt.target.value


            this.setState({
                questions: [...this.state.questions, name],
                answers: [...this.state.answers, value]
            })

    }



    render() {
        return (
            <form id="quiz-form" onSubmit={(evt) => this.props.handleSubmit(evt, this.state)}>
                <label htmlFor="question">{this.props.question.question}</label>
                <input onChange={this.handleChange}
                    type="radio"
                    name={this.props.question.id}
                    value={0}
                />
                <input onChange={this.handleChange}
                    type="radio"
                    name={this.props.question.id}
                    value={25}
                />

                </form>
        )
    }
0
Alina 16 styczeń 2020, 23:46

1 odpowiedź

Najlepsza odpowiedź

Używasz metody mapy (), która zasadniczo pętla macierzy, więc tak, to powoduje każde pytanie jako inna forma. Choulnt umieszcza każde pytanie jako inna forma, po prostu owinąć je na jeden i usunąć znacznik z Quizform.

Również handleBmit powinien być metodą, która przesyła formularz do zaplecza (lub W.E.) i utwórz inną metodę, taką jak handlechange lub coś, co akceptuje argument i ustawia stan.

handleChange(questionName, selectedAnswer){
   this.setState({...answers, {questionName, selected: selectedAnswer}})
}

W ten sposób możesz zachować nazwę pytania (ID lub coś takiego jakby byłoby lepsze) i wybrana odpowiedź i przekazuje go jako rekwizyty do swojego quizform (co również wymaga zmiany na temat czegoś w rodzaju pytań) i sprawdź radio, jeśli masz maszyny Selectionanswer Prop.

Twój obecny komponent Quizform powinien wyglądać na coś takiego (co również powinno być komponentem funkcjonalnym, a nie klasą)

             const radioButtons = [{id: 'first', value: 1}, id:'second', value: 2];
              function Question({selectedAnswer, question, name, id}){
                 return (
                    <>
                   <label htmlFor={id}>{question}</label>
                   {radioButtons.map(({id: btnId, value}) => 
                      {<input type="radio" id={id.concat(btnId)} 
                        {selectedAnswer === value ? checked : null}
                        name={name} value={value} />})}
                  </>
               );
            }

W tym przykładzie musisz przekazać identyfikator pytania, nazwa, selectionanswer i pytanie, aby wyświetlić wszystko poprawne. Id zostanie użyty do etykiety, ponieważ odnosi się do identyfikatora elementu, który musi być unikalny na każdej stronie.

0
Mantas Giniūnas 16 styczeń 2020, 21:22