React 钩子表单在取消时提交

Question

I am using React Hook form. I have a button cancel with a OnCancel function. Basically React Hook Form auto submit on cancel. Why ? is there a way to block the submit on cancel ?

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


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

Answer 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>
  );
}

You can either give your button the property type="button" see example code. Or you can add e.preventDefault() to your function. See the commented code.