React Form自动提交，防止自动提交

Question

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

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

代码:-

Form Code

Answer 1

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

Answer 2

我已将 RichEditor 移出表单。您仍然可以处理表单提交，我在提交按钮本身上添加了 onClick 侦听器。 只需将此 return 语句复制并粘贴到您的 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>
    </>
  );
};

React Form自动提交，防止自动提交

React Form submits automatically, prevent automatic submission

javascript

forms

reactjs