在 ReactJS 中保存動態表單中的值

Question

我是 Reactjs 的初學者，我沒有找到從 ReactJS 中的動態表單保存數據的最佳方法。 此表單每頁只能顯示 10 個問題，當我繼續前進時，我必須將答案保存在當前頁面上。 有誰能夠幫我？ 我正在考慮在表單上放置一個 ID，然后獲取組件數據……每個組件（輸入）都有一個表單。

這就是我嘗試編寫 function 的方式，它將保存答案以及我如何呈現動態輸入

     save = (currentIndex, pageNumber) => {

            let {text="", id=""} = this.form.model;
            let answerText = text;
            if(Array.isArray(answerText)){
                text = JSON.stringify(text);
                answerText = answerText.filter(item=>!!item)
                if(!answerText.length) answerText = "";
                else answerText = text;
            }
            saveAnswerAction({
                answerId : id,
                text: answerText,
            }).then(()=>{

                return refresh();
            }).catch(e=>{
                console.log(e);
            });

        }

        render() {

            if (this.state.answers) {
                    var questions = this.state.answers.toJSON();
                    var questionsToRender = [];

                    var qInit = (this.state.currentPage * this.state.quantityQuestionsPerPage) - this.state.quantityQuestionsPerPage;
                    var qEnd = this.state.currentPage * this.state.quantityQuestionsPerPage;

                    if (qEnd > questions.length) {
                            qEnd = qInit + 1;
                    }

                    for (var i = qInit; i < qEnd; i++) {
                            var readOnly = false;
                            let QuestionRender = QuestionRenderFactory(questions[i], i, readOnly);
                            questionsToRender.push(<QuestionRender ref={form=>this.form=form} />)
                    }


                    return (
                            <div>
                                    {questionsToRender}
                            </div>
                    )
            }
            else {
                    return (
                            <div>
                                    NO QUESTIONS
                            </div>
                    )
            }

        }

    render() {
        return (
            <div className={"formId_" + formId}>
                <p className="question">{questionAnswer.question.text} {questionAnswer.question.required ? <span className="question-required">* </span>: null }</p>        
                { questionAnswer.question.help && <div className="help">{questionAnswer.question.help}</div> }
                            
                <Form
                    ref={form => this.form = form}
                    value={this.state.model}
                    onChange={model => this.setState({ model })}>
                    {fields}
                </Form>
                <br />
            </div>
        )
    }

我將渲染 HTML：

<div class="content">
   <h3 class="title">Form</h3>

   <h3 class="subtitle">Fields * are required</h3>
   <br>
   <div>
      <div class="formId_0">
         <p class="question">
           Question 1<span class="question-required">* </span>
         </p>
         <div class="help">help</div>
         <form novalidate="">
            <div class="input-container undefined undefined">
               <div class="input-wrapper"><input name="text" class="  invalid-field" placeholder="" id="id_1" value="800b7e6e-ce0c-44bb-a4d8-60cffaacb509"><span class="inputError"><span class="validation-error">invalid field</span></span></div>
            </div>
         </form>
         <br>
      </div>
      <div class="formId_1">
         <p class="question">
            question 2<span class="question-required">* </span>
         </p>
         <div class="help">help 2</div>
         <form novalidate="">
            <div class="input-container undefined undefined">
               <div class="input-wrapper">
                  <input type="text" name="text" class=" " placeholder="" id="id_2" value="www.test.com">
                  <span class="inputError">
                  </span>
               </div>
            </div>
         </form>
         <br>
      </div>
   </div>
   <div class="buttons"><a class="btn skyBlue" href="/">Home</a><button class="btn-previous">Previous</button><button class="btn-next">Next</button></div>
</div>

Answer 1

您可以使用 localStorage，但我不知道它是高效、安全還是通往 go 的最佳途徑