React登录提交时邮箱密码出现在Localhost URL查询串问题求助

兄弟，你这问题找错地方加preventDefault()啦！输入框的onChange事件本来就不会触发页面跳转，你在那加阻止默认行为完全没用，真正导致URL带查询参数跳转的是表单的默认提交行为或者按钮的默认跳转逻辑，给你两种场景的解决方案：

场景1：用<form>包裹登录表单 #

如果你的登录输入框是放在<form>标签里的，点击登录按钮时浏览器会默认触发表单的提交行为——也就是用GET方式把表单参数拼到URL里跳转，这就是你看到的问题根源。

你需要做的是：

1. 把preventDefault()移到表单的onSubmit事件里，输入框的onChange事件里完全没必要加
2. 确保登录按钮是type="submit"，让它触发表单的submit事件

修改后的代码示例：

// 输入框的change事件去掉多余的preventDefault
onEmailChange = (event) => {
  console.log('emailchanged')
  this.setState({signinEmail: event.target.value})
}

onPasswordchange = (event) => {
  console.log('passwordchanged')
  this.setState({signinPassword: event.target.value})
}

// 登录提交方法，在这里阻止表单默认行为
onSubmitSignin = (event) => {
  // 关键：阻止表单默认提交跳转
  event.preventDefault();
  
  // 执行你的POST请求逻辑
  fetch('/api/signin', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: this.state.signinEmail,
      password: this.state.signinPassword
    })
  })
  .then(response => response.json())
  .then(data => {
    // 这里处理登录成功/失败逻辑，比如跳转首页
  })
  .catch(error => console.error('登录请求出错:', error));
}

对应的JSX结构：

<form onSubmit={this.onSubmitSignin}>
  <input 
    type="email" 
    onChange={this.onEmailChange} 
    value={this.state.signinEmail}
    placeholder="邮箱"
  />
  <input 
    type="password" 
    onChange={this.onPasswordchange} 
    value={this.state.signinPassword}
    placeholder="密码"
  />
  <button type="submit">登录</button>
</form>

场景2：没有用<form>，直接用按钮触发登录 #

如果你的登录逻辑直接绑定在按钮的onClick事件上，要注意两点：

1. 把按钮的type设为button（默认是submit，部分浏览器会有意外的默认行为）
2. 在onClick事件里加上event.preventDefault()（加了更稳妥）

示例代码：

onSubmitSignin = (event) => {
  event.preventDefault();
  // 执行POST请求逻辑，和上面一致
}

对应的按钮标签：

<button type="button" onClick={this.onSubmitSignin}>登录</button>

总结一下：你之前在输入框change事件加的preventDefault()纯粹是做无用功，真正要阻止的是表单提交或者按钮的默认跳转行为，按上面的方法改完就不会再看到URL里的账号密码啦！

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