Javascript 如何确保在表单中粘贴内容时，表单值立即更新？

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

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

具体地说，当我将内容粘贴到表单中时，我的验证机制似乎对新粘贴的值视而不见，我不知道为什么

这里是我的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>
    );
  }
}

import React，{Component}来自“React”；
从“验证器”导入验证器；
从“/Form.css”导入样式；
类注册扩展了组件{
状态={
电邮：{
值：“”，
验证：false
},
密码：{
值：“”，
验证：false
},
validateForm:false，
名称submit：“offSubmit”
};
handleSubmit=e=>{
e、 预防默认值（）；
如果（！this.state.validateForm）{
返回警报（“请填写表格”）；
}
//调用http任务。。。
//将表单重置为false
this.setState（{nameSubmit:“offSubmit”}）；
this.setState（{validateForm:false}）；
返回警报（“提交成功=）”；
};
handleChange=e=>{
e、 预防默认值（）；
让范围=这个；
这是我的国家({
[e.target.name]：Object.assign（{}，this.state[e.target.name]{
价值：即目标价值
})
});
setTimeout（函数（）{
日志（“密码”、作用域、状态、密码、值）；
}, 1000);
如果（e.target.name==“电子邮件”）{
//还原更新邮件
}
如果（例如，target.name==“密码”）{
//还原更新密码
}
本表格（e）；
};
checkForm=e=>{
e、 预防默认值（）；
console.log（“checkformjoin”）；
让范围=这个；
如果（e.target.name==“电子邮件”）{
让email=e.target.value.trim（）；
如果(
电子邮件类型==“字符串”&&
电子邮件长度>=1&&
validator.isEmail（电子邮件）
) {
这是我的国家({
[e.target.name]：Object.assign（{}，this.state[e.target.name]{
验证：正确
})
});
this.validateForm（this.state）；
}否则{
这是我的国家({
[e.target.name]：Object.assign（{}，this.state[e.target.name]{
验证：false
})
});
this.setState（{nameSubmit:“offSubmit”}）；
this.setState（{validateForm:false}）；
}
}
如果（例如，target.name==“密码”）{
让regexCheck=RegExp(
“^（？=.[a-z]）（？=.[a-z]）（？=.*d）（？=.[$@$！%*？&]）[a-Za-zd$@$！%*？&]{8，}”
);
让password=e.target.value.trim（）；
如果(
密码类型==“字符串”&&
password.length>=1&&
regexCheck.test（密码）
) {
这是我的国家({
[e.target.name]：Object.assign（{}，this.state[e.target.name]{
验证：正确
})
});
this.validateForm（this.state）；
}否则{
这是我的国家({
[e.target.name]：Object.assign（{}，this.state[e.target.name]{
验证：false
})
});
this.setState（{nameSubmit:“offSubmit”}）；
this.setState（{validateForm:false}）；
}
}
};
validateForm=状态=>{
让validatePassword=this.state.password.validation；
让validateEmail=this.state.email.validation；
console.log(
“validatePassword:“+validatePassword，
，validateEmail:“+validateEmail”
);
if（validateEmail&&validatePassword）{
this.setState（{validateForm:true}）；
this.setState（{nameSubmit:“onSubmit”}）；
log（“表单已验证，nameSubmit:”，this.state.nameSubmit）；
}
};
render（）{
log（“nameSubmit:”，this.state.nameSubmit）；
返回(
电子邮件
这个.handleChange（e）}
name=“电子邮件”
id=“电子邮件”
type=“text”
必修的
/>
密码
这个.handleChange（e）}
name=“密码”
id=“密码”
type=“text”
必修的
/>
);
}
}

我不知道怎么了，如果有人能给我一个提示，那就太好了

谢谢两件事。
1.如注释中所述，（在文档中查找“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);
  };

做

出于同样的原因（setState是异步的），不要像调用同步方法一样调用

setState

而不是这个,

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

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

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

以便立即进行更改

---

是的，如果您需要立即访问

nameSubmit

或

validateForm

的更新值，请在

setState

的回调中检查它们，这是因为

setState

是异步的，因此，如果您尝试在

setState

之后直接使用

this.state

，它将不包含更新后的值。好的，我将寻找一些相关信息，谢谢，但是

onChange={e=>this.handleChange（e）}

的意义何在？为什么不干脆给它这个。把手换一下？@Dave Newton好问题。。！

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