React登录表单提交后字段值出现在URL查询字符串是什么原因？

这个行为不是React的默认行为，是原生HTML表单的默认逻辑导致的。

原因说明 #

• HTML的<form>标签未显式指定method属性时，默认采用GET方式提交，提交时会自动将所有带name属性的表单输入值拼接为查询字符串追加到URL后，这就是你看到密码和邮箱出现在URL里的原因。
• 你的代码仅给提交按钮绑定了点击事件执行e.preventDefault()，但没有给<form>标签绑定onSubmit事件。表单提交可以通过多种方式触发（比如输入框按回车触发提交等），非点击按钮的提交场景不会触发你绑定在按钮上的阻止逻辑，就会走原生默认提交逻辑。

修复方案 #

修改LoginScreen.js中的表单绑定逻辑：

1. 给<form>标签添加onSubmit属性绑定提交处理函数，把原来的：

<form className="login-form p-4">

修改为：

<form className="login-form p-4" onSubmit={submitLoginHandler}>

2. 删除提交按钮上的onClick={(e) => submitLoginHandler(e)}属性，不需要重复绑定，form的onSubmit事件会自动覆盖所有合法的表单提交触发场景。

修改后所有表单提交行为都会先执行你写的e.preventDefault()阻止原生默认提交，不会再出现参数拼接在URL中的问题。

内容的提问来源于stack exchange，提问作者pancake