我有一个多表单react应用程序,我根据用户当前所在的页面(页面索引)呈现每个表单。我希望检索下一个组件的Next按钮也是一个Submit按钮。问题是next按钮确实改变了索引,因此呈现了下一个组件,但它会立即在下一个呈现的表单上的必填字段上抛出错误。我该如何预防这种情况?
下面是我如何渲染组件
<form>
{statementArray[currentStepIndex]}
<Buttons
currentStep={currentStepIndex}
getNextStatement={getNextStatement}
next={next}
back={back} />
</form>
另外,statementArray 是<Survey />
组件的数组,Button组件内部是按钮 Next 和 Previous,它们调用函数next()
和back()
。在<Survey />
组件内部,只有几个标记为需要的无线电输入字段。
1条答案
按热度按时间qybjjes11#
问题是,在下一个组件有机会呈现之前,下一个按钮就提交了表单。为了防止这种情况,您可以使用“下一步”按钮上的preventDefault()方法来阻止表单提交。您还可以使用ref属性获取对表单元素的引用,然后在呈现下一个组件之前调用它的reset()方法来清除表单数据。
下面是如何执行此操作的示例:
这将防止在下一个组件有机会呈现之前提交表单,并且还将在呈现下一个组件之前清除表单数据。