Javascript 控制台错误："；表单提交已取消，因为表单未连接”；

我收到控制台错误：“表单提交已取消，因为表单未连接”

根据，我需要在某处添加以下行：

document.body.appendChild(form);

作为React.js的新手，我尝试将它放在我的主组件的渲染函数中以及上面。两人都打破了这一页。我还尝试将其添加到index.js文件中，这也破坏了页面

如果这是基于react.js的表单的正确代码，那么应该将其准确放置在哪里

Usurvey.js（包含2个表单，初始加载时我得到1个错误）

import React，{Component}来自“React”
const firebase=require（'firebase'）
const shortid=require（'shortid'）
//初始化Firebase
变量配置={
apiKey:“[已删除]”，
authDomain:“[已删除]”，
数据库URL:“[已删除]”，
projectId:“[删除]”，
storageBucket:“[已删除]”，
messagingSenderId:“[已删除]”
};
firebase.initializeApp（配置）；
类Usurvey扩展组件{
handleNameSubmit（事件）{
var nameValue=this.refs.nameRef.value
这是我的国家({
学生姓名：nameValue
}，函数（）{
//console.log（this.state）
})
}
手柄旋转选择（e）{
//var answers=e.target.value
让answers=this.state.answers
如果（e.target.name=='answer1'）{
answers.answer1=e.target.value
}else if（e.target.name=='answer2'）{
answers.answer2=e.target.value
}否则如果（e.target.name==='answer3'）{
answers.answer3=e.target.value
}
这是我的国家({
答案：答案
}，函数（）{
console.log（this.state）
})
}
handleQuestionSubmit（）{
firebase.database（）.ref（'uSurvey/'+this.state.uid）.set({
studentName:this.state.studentName，
答案：this.state.answers
})
这是我的国家({
提交的问题：正确
})
}
建造师（道具）{
超级（道具）
此.state={
uid:shortid.generate（），
学生姓名：“”，
答复:{
回答1:“，
回答二:",，
答复3:'
},
提交的问题：错误
}
this.handlenamesmit=this.handlenamesmit.bind（this）；
this.handleAnswerSelect=this.handleAnswerSelect.bind（this）
this.handleQuestionSubmit=this.handleQuestionSubmit.bind（this）
}
render（）{
让我们命名HTML
让我来提问
if（this.state.studentName==''&&this.state.isSubmitted===false）{
名称HTML=(
嗨，你叫什么名字？
)
问题HTML=''
}else if（this.state.studentName！=''&&this.state.isSubmitted===false）{
//nameHTML=感谢您填写我们的表格{this.state.studentName}
问题shtml=(
问题
你喜欢什么课程？


技术
设计
营销
你几岁？


20或以下
21-30
30+
你的学习目标是什么？


自由职业的
前端
后端
)
}else if（this.state.studentName！=''&&this.state.isSubmitted===true）{
nameHTML=感谢您提交我们的调查，{this.state.studentName}
}
返回(
{nameHTML}
{/*------------------*/}
{questionsHTML}
)
}
}
导出默认高利贷

您可以添加

事件.preventDefault（）

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

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

您可以添加
event.preventDefault（）

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

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

我花了半个小时寻找这个答案。我一点也不知道为什么会发生这种情况，但这让我抓狂。我只花了半个小时寻找这个答案。我一点也不知道为什么会这样，但这让我发疯了。