在表单第一次验证错误时展开手风琴

Question

我在 react-bootstrap 中有一个手风琴和一个带有验证的表单。 一些表单字段在手风琴的第一页上，一些在第二页上。 验证错误后，如何展开包含第一个无效字段的手风琴页面？

我设法获得了第一个无效的表单字段，但我无法确定哪个手风琴页面包含该字段。

Answer 1

如果您有第一个无效的表单字段，那么您可以使用closest通过 class 'collapse' 找到它的手风琴卡。 将“显示”添加到它的类中，这样它就会打开，然后您可以通过scrollIntoView滚动到无效元素

 handleSubmit = (event) => { const form = event.currentTarget; if (form.checkValidity() === false) { let firstInvalidFieldInTheForm = form.querySelectorAll(':invalid')[0]; let ancestorAccordion = firstInvalidFieldInTheForm.closest(".collapse"); ancestorAccordion.classList.add("show") firstInvalidFieldInTheForm.scrollIntoView(); event.preventDefault(); event.stopPropagation(); }else{ this.handleSaveButtonClick(); } this.setState({validated: true}); };