javascript - 防止表单提交与 js 禁用 react

Question

我在 React 中有一个表单，我希望在以下两种情况下无法提交:

1. JS 被禁用
2. 我的应用程序包尚未下载/解析

该应用程序是在服务器端呈现的，因此在应用程序包在客户端完成下载之前表单是可见的。如果表单在 bundle 完成之前提交，表单将发出请求并将表单参数附加到 url。

我试过像这样设置空白设置

<form onSubmit="return false">
</form>

最初将表单设置为禁用，然后在 componentDidMount() 上启用它似乎是一个解决方案，但我想知道是否有一些 HTML 属性我可以添加到表单或提交按钮。

Answer 1

禁用提交按钮并在 JavaScript 模块末尾启用。

如果禁用了 JavaScript，这将使按钮保持禁用状态，并且仅在执行 JavaScript 模块后激活。

// In your JS module
document.getElementById('submit').disabled = false

<form>
  <input id='submit' type='submit' disabled />
</form>

请记住，这绝不应用作安全措施。客户端上的代码本质上处于用户的控制之下，用户可以不受任何限制地操纵。