React钩子表单在取消时提交

Question

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

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

你可以给你的按钮属性type="button"参见示例代码。或者你可以把e.preventDefault()加到函数中。见注释代码。