在React中切換輸入字段表單驗證

Question

目前，在我的表單中，用戶輸入內容后，輸入字段即會得到驗證。 這是該代碼-

index.js

import React from "react";
import ReactDOM from "react-dom";
import ShowError from "./ShowError";
import "./styles.css";

class App extends React.Component {
  state = {
    email: "",
    name: "",
    mobile: "",
    errors: {
      email: "",
      name: "",
      mobile: ""
    },
    nameError: false,
    emailError: false,
    mobileError: false,
    formError: false
  };

  showMsg = () => {
    if (!this.state.formError) {
      alert("Error");
    }
  };
  validateFunc = (name, value) => {
    let error = this.state.errors;
    let nameError = this.state.nameError;
    let emailError = this.state.emailError;
    let mobileError = this.state.mobileError;
    switch (name) {
      case "name":
        nameError = !/^[a-zA-Z ]+$/.test(value);
        error.name = nameError ? " is Invalid" : "";
        break;
      case "email":
        emailError = !/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i.test(value);
        error.email = emailError ? " is Invalid" : "";
        break;
      case "mobile":
        mobileError = !/^[0-9]{10}$/.test(value);
        error.mobile = mobileError ? " is Invalid" : "";
        break;
    }
    this.setState({
      errors: error,
      nameError: nameError,
      emailError: emailError,
      mobileError: mobileError
    });
  };

  handleInput = event => {
    const name = event.target.name;
    const value = event.target.value;
    this.setState(
      {
        [name]: value
      },
      this.validateFunc(name, value)
    );
  };
  handleSubmit = event => {
    event.preventDefault();
    let formError =
      this.state.nameError || this.state.emailError || this.state.mobileError;
    this.setState({
      formError: formError
    });
  };
  render() {
    return (
      <div className="App">
        <h1>Basic Form Validation</h1>
        <form className="FormStyle">
          <input
            className="FieldStyle"
            type="text"
            name="name"
            placeholder="Name"
            onChange={event => this.handleInput(event)}
          />
          <input
            className="FieldStyle"
            type="email"
            name="email"
            placeholder="Email"
            onChange={event => this.handleInput(event)}
          />
          <input
            className="FieldStyle"
            type="number"
            name="mobile"
            placeholder="Mobile"
            onChange={event => this.handleInput(event)}
          />
          <button
            className="FieldStyle"
            type="submit"
            onClick={event => this.handleSubmit(event)}
          >
            SUBMIT
          </button>
        </form>
        <ShowError error={this.state.errors} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ShowError.js

import React from "react";

const ShowError = props => {
  return Object.keys(props.error).map((field, index) => {
    if (props.error[field].length > 0) {
      return (
        <p key={index}>
          {field} {props.error[field]}
        </p>
      );
    } else {
      return "";
    }
  });
};

export default ShowError;

預期的行為-我想要的是，一旦用戶將注意力集中在下一個輸入字段上，或者當按下“ Tab”鍵時，這些字段就應該得到驗證，我不想在用戶鍵入時但在用戶切換輸入時進行驗證領域。 如何實現上述行為？ 非常感謝！

PS-如果不使用redux-forms之類的庫就可以實現這一點，那就更好了。

Answer 1

使用onBlur，以便在用戶離開組件時觸發事件

  onBlur={event => this.handleInput(event)}