React 钩子表单在取消时提交

【问题标题】：React hook form submit on cancelReact 钩子表单在取消时提交
【发布时间】：2022-07-07 16:43:08
【问题描述】：

我正在使用 React Hook 表单。我有一个带有 OnCancel 功能的按钮取消。基本上 React Hook Form 在取消时自动提交。为什么？有没有办法在取消时阻止提交？

    const onCancel = () => {
    history.goBack();
};


<StyledButton onClick={onCancel}>
    {Translate('cancel')}
</StyledButton>

【问题讨论】：

这可能是因为您使用的是按钮。尝试给它一个 type="button" 的道具？

标签： javascript reactjs react-hook-form

【解决方案1】：

import "./styles.css";

export default function App() {
  const dontSubmit = (e) => {
    // e.preventDefault();
    console.log('Dont submit this');
  }


  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>


      <form>
        <input type="text" />
        <button type="button" onClick={dontSubmit}>Do not submit!</button>
      </form>
    </div>
  );
}

您可以为您的按钮指定属性type="button"，参见示例代码。或者您可以将e.preventDefault() 添加到您的函数中。请参阅注释代码。

【讨论】：