React项目登录表单拆分组件后如何获取用户凭证并在点击登录时校验

这是React处理拆分表单组件的标准方案，具体修改如下：

1. 修改父组件Login.js #

在Login组件中维护表单状态，添加输入变更处理、提交校验逻辑：

import "../css/LoginMain.css";
import LoginButtons from "./LoginButtons";
import LoginInput from "./LoginInput";
import React from "react";

class Login extends React.Component {
  // 初始化表单状态
  state = {
    email: '',
    password: ''
  }

  // 处理输入变化，更新状态
  handleInputChange = (field, value) => {
    this.setState({
      [field]: value
    })
  }

  // 处理表单提交，做校验
  handleSubmit = (e) => {
    // 阻止表单默认提交跳转行为
    e.preventDefault();
    const { email, password } = this.state;
    const errors = {};

    // 自定义校验规则，可根据需求调整
    const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailReg.test(email)) {
      errors.email = "请输入合法的邮箱地址";
    }
    if (password.length < 6) {
      errors.password = "密码长度不能少于6位";
    }

    // 有错误就提示，无错误就提交登录请求
    if (Object.keys(errors).length > 0) {
      alert(Object.values(errors).join('\n'));
      return;
    }

    // 校验通过，此处可以调用后端登录接口
    console.log("登录凭证校验通过：", { email, password });
    // 后续可继续处理登录逻辑，比如发送post请求到登录接口
  }

  render() {
    return (
      <div className="limiter">
        <div className="container-login100">
          <div className="wrap-login100 p-l-110 p-r-110 p-t-62 p-b-33">
            {/* 绑定表单提交事件 */}
            <form
              className="login100-form validate-form flex-sb flex-w"
              onSubmit={this.handleSubmit}
              method="post"
            >
              <span className="login100-form-title p-b-53"> Sign in now</span>
              {/* 给输入组件传递状态更新方法和当前表单值 */}
              <LoginInput onInputChange={this.handleInputChange} email={this.state.email} password={this.state.password}/>
              <a href="forget.html" className="forgot-password">
                Forgot Password?
              </a>
              <LoginButtons />
              <div className="row" />
              <div className="text-black mb-3">or login with</div>
              <div className="g-signin2" data-onsuccess="onSignIn" />
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Login;

2. 修改LoginInput.js #

接收父组件传递的方法和值，绑定到输入框的onChange和value属性，实现受控组件：

import React from "react";
import "../css/Login.css";
import "../css/LoginMain.css";

class LoginInput extends React.Component {
  render() {
    const { onInputChange, email, password } = this.props;
    return (
      <div>
        <div className="wrap-input100 validate-input">
          <input
            className="input100"
            type="email"
            id="inputEmail"
            placeholder="Email Address"
            name="email"
            value={email}
            onChange={(e) => onInputChange('email', e.target.value)}
            required
          />
          <span>
            <i className="focus-input100" />
          </span>
        </div>
        <br />
        <div className="wrap-input100 validate-input">
          <input
            className="input100"
            type="password"
            id="inputPassword"
            placeholder="Password"
            name="password"
            value={password}
            onChange={(e) => onInputChange('password', e.target.value)}
            required
          />
          <span>
            <i className="focus-input100" />
          </span>
        </div>
      </div>
    );
  }
}

export default LoginInput;

3. 可选优化 #

你原有代码里注册按钮的事件写法不符合React规范，可以修改LoginButtons.js对应的代码：

<button
  onClick={() => location.href='../register.html'}
  className="login100-form-btn m-b-10"
>
  Sign up
</button>

如果需要更精细的错误提示，可以把错误信息也存在Login组件的state里，传递给LoginInput组件在对应输入框下方展示，也可以给登录按钮加加载状态避免重复提交。

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