Console Fehler: „Form abgebrochen Einreichung, da das Formular nicht angeschlossen“

Question

Ich erhalte die Konsole Fehler: „Form Vorlage abgebrochen, da das Formular nicht angeschlossen“

Nach this thread Ich brauche die folgende Zeile hinzufügen irgendwo:

document.body.appendChild(form); 

sein neu ich React.js versucht, dies in meinem Hauptkomponente der render-Funktion sowie darüber platzieren. Beide haben die Seite durchbrochen. Ich habe auch versucht, es der Datei index.js hinzuzufügen, und das hat die Seite auch gebrochen.

Wenn dies der richtige Code für eine react.js-basierte Form ist, wo sollte es genau platziert werden?

Usurvey.js (enthält 2 bildet, I 1 Fehler bei der Anfangslast bekommen)

import React, { Component } from 'react' 

const firebase = require('firebase') 
const shortid = require('shortid') 

// Initialize Firebase 
var config = { 
    apiKey: "[removed]", 
    authDomain: "[removed]", 
    databaseURL: "[removed]", 
    projectId: "[removed]", 
    storageBucket: "[removed]", 
    messagingSenderId: "[removed]" 
}; 
firebase.initializeApp(config); 

class Usurvey extends Component { 

    handleNameSubmit(event) { 
    var nameValue = this.refs.nameRef.value 
    this.setState({ 
     studentName: nameValue 
    }, function() { 
     // console.log(this.state) 
    }) 
    } 

    handleAnswerSelect(e) { 
    // var answers = e.target.value 
    let answers = this.state.answers 

    if (e.target.name === 'answer1') { 
     answers.answer1 = e.target.value 
    } else if (e.target.name === 'answer2') { 
     answers.answer2 = e.target.value 
    } else if (e.target.name === 'answer3') { 
     answers.answer3 = e.target.value 
    } 
    this.setState({ 
     answers: answers 
    }, function() { 
     console.log(this.state) 
    }) 
    } 

    handleQuestionSubmit() { 
    firebase.database().ref('uSurvey/'+this.state.uid).set({ 
     studentName: this.state.studentName, 
     answers: this.state.answers 
    }) 
    this.setState({ 
     isSubmitted: true 
    }) 
    } 


    constructor(props) { 
    super(props) 

    this.state = { 
     uid: shortid.generate(), 
     studentName: '', 
     answers: { 
     answer1: '', 
     answer2: '', 
     answer3: '' 
     }, 
     isSubmitted: false 
    } 
    this.handleNameSubmit = this.handleNameSubmit.bind(this); 
    this.handleAnswerSelect = this.handleAnswerSelect.bind(this) 
    this.handleQuestionSubmit = this.handleQuestionSubmit.bind(this) 
    } 

    render() { 
    let nameHTML 
    let questionsHTML 

    if (this.state.studentName === '' && this.state.isSubmitted === false) { 
     nameHTML = (
     <div> 
      <h1>Hi, what is your name?</h1> 
      <form className="formTag" id="form1" onSubmit={this.handleNameSubmit}> 
      <input className="form-input" id="test-id" type="text" placeholder="Enter your name" ref="nameRef" /> 
      </form> 
     </div> 
    ) 
     questionsHTML = '' 
    } else if (this.state.studentName !== '' && this.state.isSubmitted === false) { 
     // nameHTML = <h1>Thanks for filling out our form, {this.state.studentName}</h1> 
     questionsHTML = (
     <div> 
      <h2>Questions</h2> 
      <form className="formTag" id="form2" onSubmit={this.handleFormSubmit}> 
      <div className="card"> 
       <label htmlFor="">What courses do you prefer?</label> 
       <br/> 
       <input type="radio" name="answer1" value="Technology" onChange={this.handleAnswerSelect}/> Technology 
       <input type="radio" name="answer1" value="Design" onChange={this.handleAnswerSelect}/> Design 
       <input type="radio" name="answer1" value="Marketing" onChange={this.handleAnswerSelect}/> Marketing 
      </div> 

      <div className="card"> 
       <label htmlFor="">What is your Age?</label> 
       <br/> 
       <input type="radio" name="answer2" value="<20>" onChange={this.handleAnswerSelect}/> 20 or less 
       <input type="radio" name="answer2" value="21-30" onChange={this.handleAnswerSelect}/> 21-30 
       <input type="radio" name="answer2" value="30+" onChange={this.handleAnswerSelect}/> 30+ 
      </div> 

      <div className="card"> 
       <label htmlFor="">What is your learning objective?</label> 
       <br/> 
       <input type="radio" name="answer3" value="Freelance" onChange={this.handleAnswerSelect}/> Freelance 
       <input type="radio" name="answer3" value="Front-End" onChange={this.handleAnswerSelect}/> Front-End 
       <input type="radio" name="answer3" value="Back-End" onChange={this.handleAnswerSelect}/> Back-End 
      </div> 

      <input className="feedback-button" type="submit" value="submit" /> 
      </form> 
     </div> 
    ) 

    } else if (this.state.studentName !== '' && this.state.isSubmitted === true) { 
     nameHTML = <h1>Thanks for submitting our survey, {this.state.studentName}</h1> 
    } 
    return (
     <div> 
     {nameHTML} 
     {/*------------------*/} 
     {questionsHTML} 
     </div> 
    ) 
    } 
} 

export default Usurvey 

Answer 1

Sie event.preventDefault(); auf der handleNameSubmit Funktion hinzufügen könnte

handleNameSubmit(event) { 
    var nameValue = this.refs.nameRef.value 
    this.setState({ 
     studentName: nameValue 
    }, function() { 
     // console.log(this.state) 
    }) 

    event.preventDefault(); // add event.preventDefault(); 
}