问题描述
我正在处理仅由自定义元素构成的表单。当我点击按钮时,应该提交表格。自定义元素之间的通讯存在一些问题。当我单击该按钮时,它调用表单提交,但未调用onsubmit函数,但确实出现了警报。你能帮我吗?
<form-element action="" method="POST">
<textfield-element name="number" validation="[0-9]+"> </textfield-element>
<textfield-element name="subject"> </textfield-element>
<button-element> Send </button-element>
element</button> -->
</form-element>
class ButtonElement extends HTMLElement {
constructor() {
super();
this.onclick = () => {
const form = this.closest('form');
form.submit();
}
}
}
window.customElements.define('button-element',ButtonElement)
class FormElement extends HTMLElement {
constructor() {
super();
this.formNode = this.shadowRoot.querySelector('form')
for (let i = 0; i < this.childNodes.length; i++) {
if(this.childNodes[i].localName === 'textfield-element' || this.childNodes[i].localName === 'button-element'){
this.formNode.appendChild(this.childNodes[i])
}
}
this.onsubmit = () => {
alert('hey')
}
}
}
window.customElements.define('form-element',FormElement)
解决方法
您是否要在<form>
的影子DOM中找到一个<form-element>
this.closest('form');
?您必须执行类似this.closest('form-element').shadowDOM.querySelector('form')
的操作。
除此之外,您还可以在表单上调用submit()
。我不喜欢这种解决方案,因为以编程方式提交时,表单不会发出SubmitEvent
。作为使用您的组件的开发人员,我希望表单能够发出该事件。我认为不使用它是一个非常严重的限制,并且可能很难弄清。
查询表单以调用submit()
是我所知道的3个解决方案之一。
最明显的方法是在<button type="submit">
内使用<button-element>
,但不能使用影子DOM,这会阻止click事件到达表单。我见过的另一种解决方案很笨拙:单击<button-element>
时,在影子DOM之外创建一个按钮,以编程方式单击它并将其删除。