ReactJs：单击服务条款链接时如何防止表单提交？

问题描述

我有一个React项目，其表单为bootstrap，并带有“我同意服务条款”复选框。单击“服务条款”时，它将打开一个以服务条款为内容的模式。 一切正常，除了我关闭模式时，它还提交了表单。 我不希望在关闭表单时提交表单。我希望用户通过单击“提交”按钮来提交表单。 我该如何实现？

...

<form>
...
 <div className="form-check">
  <input
   className="form-check-input"
   type="checkBox"
   checked={state.agree}
   name='agree'
   id="agreeCheck"
   onChange={(e) => setState((state) => ({ ...state,agree: !state.agree}))}
 />
  <a href="#" onClick={handleClick}>I agree to Terms of Service</a>
  <Modal show={show} closeModal={closeModal} title={""}>{<TermsOfService/>}</Modal>
 </div>
 <input type="submit" className="btn btn-primary" value="Submit" disabled={!state.agree}/>
</form>

预先感谢您的帮助。

解决方法

更正后的代码...归功于#GuyIncognito

...

<form>
...
 <div className="form-check">
  <input
   className="form-check-input"
   type="checkbox"
   checked={state.agree}
   name='agree'
   id="agreeCheck"
   onChange={(e) => setState((state) => ({ ...state,agree: !state.agree}))}
 />
  <a href="#" onClick={handleClick}>I agree to Terms of Service</a>

 </div>
 <input type="submit" className="btn btn-primary" value="Submit" disabled={!state.agree}/>
</form>
  <Modal show={show} closeModal={closeModal} title={""}>{<TermsOfService/>}</Modal>
...