呈现html元素以作为可以提交的有效react表单元素进行反应。
呈现html元素以作为可以提交的有效react表单元素进行反应。
提问于 2019-10-22 16:30:56
我知道有人可能会说这是重复的，但它不是，请先看看我的问题，
我正在使用django多态模型，我必须根据用户在发布过程的前几步中对他们想要发布的内容所做的选择来给用户一个表单，所以在react前端创建数千个表单将为我在react前端和django后端提供数百万个工作。
所以我不得不让django渲染它的模型表单，然后我序列化输出的HTML内容并将其推送到react前端，然而在react中使用HTML现在被证明是一个问题，因为表单可以正确显示，但提交表单时，危险的呈现HTML表单字段没有被捕获，我最大的问题实际上是，有没有一种方法可以读取表单元素，
我尝试了这两个代码，但都得到了相同的结果
<form onSubmit={this.PostProduct} method='post'>
<input name={"just_see"}/> // accessing this form field is possible coz it is react compenent
{ ReactHtmlParser(this.state.form) } // cannot access form field here
<button>submit<button>
<form>同样，这个和上面的一样工作。
<input name={"just_see"}/>
<div dangerouslySetInnerHTML={{__html: this.state.form}}/>如果有人知道我能做什么，我将不胜感激
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-22 16:38:06
我认为您可以创建一个ref，然后导航到DOM元素：
constructor(props) {
super(props)
this.myRef = React.createRef();
}
onClick() {
e.preventDefault();
let myform= this.myRef.current
let inputs_ = myform.querySelectorAll('input')
var data = {}
let index = 0
for (let entry of inputs_) {
data[entry.name] = entry.value
index += 1
}
console.log(data)
}
render() {
return <div ref={myRef} dangerouslySetInnerHTML={{__html: this.state.form}}/>
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58508662
复制
相似问题
以反应呈现元素
使用容器的子元素作为子级进行react呈现
将react元素呈现到隐藏区域以进行测量
以相反的顺序呈现HTML元素
HTML5表单，阻止提交，直到所有有效元素都有效(检查焦点)
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
