类型错误： 无法读取未定义的属性'validate'

Question

我正在尝试验证我的注册表格，但我遇到了这个错误，我无法解决它。我的表格提交按钮转到handleRegistration，它应该首先验证表格，然后提交。我试着以这个链接为例https://www.itsolutionstuff.com/post/password-and-confirm-password-validation-in-reactexample.html

handleRegistration(event) {
event.preventDefault();
if (this.validate()) {
this.toggleModal();
console.log(this.state);
let input = {};
input["name"] = "";
input["email"] = "";
input["password"] = "";
input["confirmPassword"] = "";
input["age"] = "";
input["gender"] = "";
this.setState({
input: input
});
console.log(this.state)
alert('Demo Form is submited');
}
}
validate() {
let input = this.state.input;
let errors = {};
let isValid = true;
if (!input["fullname"]) {
isValid = false;
errors["fullname"] = "Please enter your name.";
}
if (!input["email"]) {
isValid = false;
errors["email"] = "Please enter your email Address.";
}
if (typeof input["email"] !== "undefined") {
var pattern = new RegExp(/^(("[w-s]+")|([w-]+(?:.[w-]+)*)|("[w-s]+")([w-]+(?:.[w-]+)*))(@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$)|(@[?((25[0-5].|2[0-4][0-9].|1[0-9]{2}.|[0-9]{1,2}.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})]?$)/i);
if (!pattern.test(input["email"])) {
isValid = false;
errors["email"] = "Please enter valid email address.";
}
}
if (!input["password"]) {
isValid = false;
errors["password"] = "Please enter your password.";
}
if (!input["confirmPassword"]) {
isValid = false;
errors["confirmPassword"] = "Please confirm your password.";
}
if (!input["age"]) {
isValid = false;
errors["age"] = "Please Enter your age.";
}
if (typeof input["password"] !== "undefined" && typeof input["confirmPassword"] !== "undefined") {
if (input["password"] != input["confirmPassword"]) {
isValid = false;
errors["password"] = "Passwords don't match.";
}
}
this.setState({
errors: errors
});
return isValid;
}
handleChange(event) {
let input = this.state.input;
input[event.target.name] = event.target.value;
this.setState({
input
});
}

我在这里初始化我的输入和错误对象的状态

this.state = {
isNavOpen: false,
isModalOpen: false,
isRegistrationModalOpen: false,
input: {},
errors: {}
}

我的登记表结构像

<Form onSubmit={this.handleRegistration}>
<FormGroup>
<Input type="text" id="fullname" name="fullname" placeholder="Full Name" value={this.state.input.name} onChange={this.handleChange}></Input>
<div className="text-danger">{this.state.errors.name}</div>
</FormGroup>
....
</Form>

谢谢

Answer 1

问题

<Form onSubmit={this.handleRegistration}>

this.handleRegistration没有绑定到类(组件(，因此this没有引用类实例。

解决方案

将该方法声明为箭头函数。这样，它将是实例方法，但不在原型上，因此this将引用实例。

handleRegistration(event) {

至

handleRegistration = (event) => { 

更多信息：https://reactjs.org/docs/faq-functions.html#class-房地产-第三阶段-提案。