时间戳

首页 > 解决方案 > 单页应用程序：如果我没有将表单值发布到服务器并且我没有使用任何 HTML 验证，我可以停止使用

标签？

javascript - 单页应用程序：如果我没有将表单值发布到服务器并且我没有使用任何 HTML 验证，我可以停止使用
标签？

问题描述

这更像是一个概念问题。

TLDR：<form>由于我没有通过 HTTP 将表单信息发布到服务器，我也没有使用 HTML5 验证，所以在不使用传统 HTML时我会丢失什么submit吗？

我在一个项目中使用React已经有一段时间了。

这是一个单页应用程序，我的整个后端将基于Firebase Cloud Functions。

由于它是单页应用程序，因此不欢迎表单提交重定向和页面刷新。

我一直在想，到目前为止我构建的任何表单，如果没有 html<form>标签，我也可以做同样的事情。

实际上，我所有的表单组件提交功能都有以下内容：

function onSubmit(event){
  event.preventDefault(); // BASICALLY DON'T SUBMIT ANYTHING AND LET MY CODE HANDLE THIS
  touchAllInputsValidateAndSubmit();
  return;
}

由于我没有向服务器发布任何内容（我将调用 Firebase 云函数）并且我不依赖 HTML5 验证，我真的需要使用<form>and <input type="submit"/>or<button type="submit"/>吗？

基本上，假设我的代码将处理验证（不使用 HTML5 验证），我希望在 React 中构建任何表单组件，我可以这样做：

function SomeFormComponent() {
  const [formState,setFormState] = useState(); // STORE FORM INPUT VALUES IN STATE

  function handlePseudoSubmit() {
    callCloudFunction(formState);  // ON SUBMIT, PASS THE FORMSTATE TO A CLOUD FUNCTION
  }

  return(
    <React.Fragment>

      // Clickable divs for checkboxes
      // Regular inputs
      // Can use contenteditable divs
      // Whatever you can think of that could be part of a form

      <button onClick={handlePseudoSubmit}>
        Click to PseudoSubmit
      </button>

    </React.Fragment>
  );
}

问题

<form>由于我没有通过 HTTP 将表单信息发布到服务器，我也没有使用 HTML5 验证，所以在不使用传统 HTML时我会丢失什么submit吗？

标签： javascripthtmlreactjsformsreact-hooks

解决方案

我建议您不要使用该<form>元素。代码的首要任务之一是使其可读并表达意图。这是MDN 对<form>元素的介绍：

HTML 元素表示一个文档部分，其中包含用于向 Web 服务器提交信息的交互式控件。

由于您没有向服务器提交信息，因此使用该<form>元素可能会造成混淆。

推荐阅读