R
R
Ruslan2021-04-07 14:21:25
Express.js
Ruslan, 2021-04-07 14:21:25

How to update forms (input-field) in react?

I have addpressHandler function

const addpressHandler =  event => {

      questions.push(
          new Question(
              question.question_text,
              [
                  {answerText: answer1.answer_text, isCorrect:  answer1.isCorrect},
                  {answerText: answer2.answer_text, isCorrect:  answer2.isCorrect},
                  {answerText: answer3.answer_text, isCorrect:  answer3.isCorrect},
                  {answerText: answer4.answer_text, isCorrect:  answer4.isCorrect},

              ]
          )
      )
}


I understand terribly crooked, but there is such a thing.
But it is needed in order to collect data from 5 forms, the 1st question, and the remaining
4 are answers to the question, so I need that when the button is pressed, all these forms first do questions.push () as in a function, and then everything was discarded so that more could be added.
Here is the form code
return (
        <div className="row">
            {!named ? (
                <>
                <div className="col s8 offset-s2" style={{paddingTop: '2rem'}}>
                    <label htmlFor="quiz_name">Назовите ваш опрос</label>
                    <div className="input-field">
                        <input
                            placeholder="quiz_name"
                            id="quiz_name"
                            type="text"
                            value={quiz.quiz_name}
                            onChange={e => setQuiz({quiz_name:e.target.value})}
                        />
                    </div>
                    <div className="col s8 offset-s2" >
                    <button className="btn waves-effect waves-light"
                            type="submit"
                            name="action"
                            onClick={namedHandler}
                    >Next
                    </button>
                    </div>
                </div>

                </>

            ) : (
                <>
                        <label htmlFor="question">Вопрос #{quiestion_id.toFixed()}</label>
                        <div className="input-field">
                            <input
                                placeholder="Вопрос"
                                id="question_name"
                                type="text"
                                value={question.question_text}
                                onChange={e => setQuestion({question_text:e.target.value})}
                            />

                        </div>
                        <div className="input-field">
                            <input
                                placeholder="Ответ 1"
                                id="answer1"
                                type="text"
                                value={answer1.answer_text}
                                onChange={e => setAnswer1({answer_text:e.target.value, ...answer1})}
                            />
                        </div>

                        <div className="input-field">
                            <input
                                placeholder="Ответ 2"
                                id="answer2"
                                type="text"
                                value={answer2.answer_text}
                                onChange={e => setAnswer2({answer_text:e.target.value,...answer2})}
                            />
                        </div>
                        <div className="input-field">
                            <input
                                placeholder="Ответ 3"
                                id="answer3"
                                type="text"
                                value={answer3.answer_text}
                                onChange={e => setAnswer3({answer_text:e.target.value, ...answer3})}
                            />
                        </div>
                        <div className="input-field">
                            <input
                                placeholder="Ответ 4"
                                id="answer4"
                                type="text"
                                value={answer4.answer_text}
                                onChange={e => setAnswer4({answer_text:e.target.value,...answer4})}
                            />
                        </div>

                    <label>Верный ответ</label>
                    <select className="browser-default" name="isCorrect" onChange={correctHandler}>
                        <option value="" disabled selected>Выберите верный ответ</option>
                        <option value="1">{answer1.answer_text}</option>
                        <option value="2">{answer2.answer_text}</option>
                        <option value="3">{answer3.answer_text}</option>
                        <option value="4">{answer4.answer_text}</option>
                    </select>

                        <div className="col s8 offset-s2" >
                            <button className="btn waves-effect waves-light"
                                    type="button"
                                    name="action"
                                    onClick={addpressHandler}
                            >Еще один вопрос
                                <i className="material-icons right">add</i>
                            </button>

                            <button className="btn waves-effect waves-light"style={{marginTop: '1rem'}}
                                    type="submit"
                                    name="action"
                                    onClick={pressHandler}
                            >Хватит, создать
                                <i className="material-icons right">create</i>
                            </button>

                        </div>
                </>

                )}

        </div>
    )


ps I have never done anything like this in js, and nowhere else, please help me figure it out

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question