reactjs react中表单上的提交按钮也检查其他组件表单

bvjxkvbb 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(109)

我有一个多表单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 />组件内部，只有几个标记为需要的无线电输入字段。

reactjs

来源：https://stackoverflow.com/questions/76263944/submit-button-on-form-in-react-also-checks-other-components-form

1条答案

按热度按时间

qybjjes11#

问题是，在下一个组件有机会呈现之前，下一个按钮就提交了表单。为了防止这种情况，您可以使用“下一步”按钮上的preventDefault（）方法来阻止表单提交。您还可以使用ref属性获取对表单元素的引用，然后在呈现下一个组件之前调用它的reset（）方法来清除表单数据。
下面是如何执行此操作的示例：

const Form = ({ statementArray, currentStepIndex, getNextStatement, next, back }) => {
  const formRef = useRef();

  return (
    <form ref={formRef}>
      {statementArray[currentStepIndex]}

      <Buttons
        currentStep={currentStepIndex}
        getNextStatement={getNextStatement}
        next={() => {
          next();
          formRef.current.reset();
        }}
        back={back}
      />
    </form>
  );
};

这将防止在下一个组件有机会呈现之前提交表单，并且还将在呈现下一个组件之前清除表单数据。

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs react中表单上的提交按钮也检查其他组件表单

1条答案

相关问题

热门标签

最新问答