类型错误:无法读取未定义的属性“validate”
2020-11-01
21366
我正在尝试验证我的注册表单,但出现此错误,我无法解决。我的表单提交按钮转到
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>
谢谢
1个回答
问题
<Form onSubmit={this.handleRegistration}>
this.handleRegistration
未绑定到类(组件),因此
this
不引用类实例。
解决方案
将方法声明为箭头函数。这样,它将是实例方法,但不在原型上,因此
this
将引用该实例。
handleRegistration(event) {
至
handleRegistration = (event) => {
更多信息: https://reactjs.org/docs/faq-functions.html#class-properties-stage-3-proposal 。
Mosh Feu
2020-11-01