javascript - 如何确保当内容粘贴到表单中时，表单值立即更新？

Question

我正在构建一个工作正常的表单，除了当我将内容直接粘贴到我的表单中时，我的程序无法注册输入。

但是，当我手动输入值时，它工作正常。

具体来说，当我在表单中粘贴内容时，我的验证机制似乎对新粘贴的值视而不见，我不明白为什么。

这里是我的 form.js :

import React, { Component } from "react";
import validator from "validator";

import style from "./Form.css";

class Signup extends Component {
  state = {
    email: {
      value: "",
      validation: false
    },
    password: {
      value: "",
      validation: false
    },
    validateForm: false,
    nameSubmit: "offSubmit"
  };

  handleSubmit = e => {
    e.preventDefault();
    if (!this.state.validateForm) {
      return alert("please fill the form");
    }
    // call http quest...

    // reset form to false
    this.setState({ nameSubmit: "offSubmit" });
    this.setState({ validateForm: false });
    return alert("submit success =)");
  };

  handleChange = e => {
    e.preventDefault();
    let scope = this;

    this.setState({
      [e.target.name]: Object.assign({}, this.state[e.target.name], {
        value: e.target.value
      })
    });

    setTimeout(function() {
      console.log("password", scope.state.password.value);
    }, 1000);

    if (e.target.name === "email") {
      // reducerUpdateMail
    }

    if (e.target.name === "password") {
      //   reducerUpdatePassword
    }

    this.checkForm(e);
  };

  checkForm = e => {
    e.preventDefault();
    console.log("checkform join");
    let scope = this;
    if (e.target.name === "email") {
      let email = e.target.value.trim();
      if (
        typeof email === "string" &&
        email.length >= 1 &&
        validator.isEmail(email)
      ) {
        this.setState({
          [e.target.name]: Object.assign({}, this.state[e.target.name], {
            validation: true
          })
        });
        this.validateForm(this.state);
      } else {
        this.setState({
          [e.target.name]: Object.assign({}, this.state[e.target.name], {
            validation: false
          })
        });
        this.setState({ nameSubmit: "offSubmit" });
        this.setState({ validateForm: false });
      }
    }

    if (e.target.name === "password") {
      let regexCheck = RegExp(
        "^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}"
      );
      let password = e.target.value.trim();
      if (
        typeof password === "string" &&
        password.length >= 1 &&
        regexCheck.test(password)
      ) {
        this.setState({
          [e.target.name]: Object.assign({}, this.state[e.target.name], {
            validation: true
          })
        });

        this.validateForm(this.state);
      } else {
        this.setState({
          [e.target.name]: Object.assign({}, this.state[e.target.name], {
            validation: false
          })
        });
        this.setState({ nameSubmit: "offSubmit" });
        this.setState({ validateForm: false });
      }
    }
  };

  validateForm = state => {
    let validatePassword = this.state.password.validation;
    let validateEmail = this.state.email.validation;

    console.log(
      "validatePassword: " + validatePassword,
      ", validateEmail: " + validateEmail
    );
    if (validateEmail && validatePassword) {
      this.setState({ validateForm: true });
      this.setState({ nameSubmit: "onSubmit" });
      console.log("form validated, nameSubmit: ", this.state.nameSubmit);
    }
  };

  render() {
    console.log("nameSubmit: ", this.state.nameSubmit);

    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="email"> Email</label>
        <input
          onChange={e => this.handleChange(e)}
          name="email"
          id="email"
          type="text"
          required
        />

        <label htmlFor="password"> Password </label>
        <input
          onChange={e => this.handleChange(e)}
          name="password"
          id="password"
          type="text"
          required
        />

        <input
          className={style[this.state.nameSubmit]}
          type="submit"
          value="Submit"
        />
      </form>
    );
  }
}

我想知道出了什么问题，如果有人有提示，那就太好了。

谢谢

Answer 1

两件事。
1.如评论中所述，setState() (在文档中查找“async”)是一个异步操作。

因此 handleChange 需要在 setState 的回调中检查 e.target.name。

代替

handleChange = e => {

    this.setState({
      [e.target.name]: Object.assign({}, this.state[e.target.name], {
        value: e.target.value
      })
    });

    if (e.target.name === "email") {
      // reducerUpdateMail
    }

    if (e.target.name === "password") {
      //   reducerUpdatePassword
    }

    this.checkForm(e);
  };

做

handleChange = e => {

    this.setState({
      [e.target.name]: Object.assign({}, this.state[e.target.name], {
        value: e.target.value
      }),
      () => {
            if (e.target.name === "email") {
              // "this.state.email.value" has an updated value here.
            }

            if (e.target.name === "password") {
              // "this.state.password.value" has an updated value here.
            }
      }
    });

    this.checkForm(e);
  };

1. 出于同样的原因(setState 是异步的)，不要像调用同步方法一样调用 setState。

取而代之的是

this.setState({ nameSubmit: "offSubmit" });
this.setState({ validateForm: false });

在一次调用中设置两种状态。

this.setState({ nameSubmit: "offSubmit", validateForm: false });

以便立即进行更改。

是的，如果您需要立即访问 nameSubmit 或 validateForm 的更新值，请在 setState 的回调中检查它们。