React表单自动提交，防止自动提交

Question

我有一个表单，它有一个富文本编辑器和一个表单提交按钮，富文本编辑器有样式按钮，当点击提交表单输入(这是不可取的)。

我想防止这种行为，我希望表单只在提交按钮被点击时提交，而不是在RTE样式按钮被点击时提交。

代码:

形式代码

Answer 1

我已经把richheditor移出了表单。你仍然可以处理表单提交，我在提交按钮本身上添加了onClick侦听器。复制并粘贴这个返回语句到你的App.js

return (
<>
<div>
<form>
<label htmlFor="contact">
Full Name <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<br />
<label htmlFor="contact">
Email <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<br />
<label htmlFor="description">
Description <span id="required-input-star">*</span>
</label>
<br />
</form> //closed the form here, and moved out RichEditor

<RichTextEditor />
<hr />
<div className="frm-btn-container">
<input type="submit" value="Cancel" id="cancel-btn" />
<input type="submit" value="Create" onClick={onSubmit} />
</div>
</div>
</>
);
};

Answer 2

尝试禁用按钮文本编辑器的按钮。