ReactJS默认表单验证与阻止表单提交实现咨询

我来帮你完善这个React表单的实现——既要保留HTML5的默认required验证，又要阻止表单默认提交行为，同时能获取表单数据。下面是完整的优化方案和代码示例：

import React, { Component } from 'react';
import images from './path/to/your/images'; // 确保图片路径正确

class LoginForm extends Component {
  constructor(props) {
    super(props);
    // 初始化表单状态
    this.state = {
      username: '',
      password: ''
    };
  }

  // 处理用户名失焦时的状态更新
  userName = (e) => {
    this.setState({
      username: e.target.value.trim()
    });
  }

  // 可选：实时更新密码状态（如果需要实时同步输入值）
  handlePasswordInput = (e) => {
    this.setState({
      password: e.target.value.trim()
    });
  }

  // 表单提交核心处理函数
  handleSubmit = (e) => {
    // 阻止表单默认跳转/提交行为
    e.preventDefault();
    
    // 验证通过后执行自定义逻辑（比如打印状态、发送登录请求）
    console.log('当前表单状态:', this.state);
    
    // 这里可以添加登录API调用，示例：
    // fetch('/api/login', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(this.state)
    // })
    // .then(res => res.json())
    // .then(data => console.log('登录结果:', data))
  }

  render() {
    return (
      // 关键：给form绑定onSubmit事件，而非给按钮绑定onClick
      <form className="loginform" onSubmit={this.handleSubmit}>
        <h1 className="logo">
          <img src={images.Logo} alt="网站Logo" />
        </h1>
        <input
          className="login"
          placeholder="Username"
          type="text"
          required // HTML5必填验证，简写等同于required="true"
          onBlur={this.userName}
          value={this.state.username} // 受控组件绑定，可选但推荐
        />
        <input
          className="login"
          placeholder="Password"
          type="password"
          required
          onChange={this.handlePasswordInput}
          value={this.state.password}
        />
        {/* 必须用type="submit"的按钮，才能触发form的提交事件和验证 */}
        <input className="submit" type="submit" value="登录" />
      </form>
    );
  }
}

export default LoginForm;

• 绑定form的onSubmit而非按钮onClick：这是触发HTML5默认验证的核心。点击type="submit"的按钮时，浏览器会先检查所有带required的输入框，只有全部填写后才会执行handleSubmit函数；如果直接给按钮绑onClick，会绕过这个验证流程。
• e.preventDefault()的位置：放在handleSubmit开头，确保验证通过后，阻止表单的默认跳转行为，让我们可以完全自定义后续逻辑。
• 受控组件推荐：给input加上value绑定state，配合onChange/onBlur更新状态，能让React始终掌控表单数据，这是React表单的标准设计模式。
• required的简写：required等同于required="true"，是HTML的标准写法，更简洁。

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