编程和尝试制作登录表单方面的新知识

Question

我在编程和web开发方面有一些基本知识。我只是在Reactjs上尝试了一些东西，并且已经尝试阅读了一些文档。我希望代码尽可能简单。

如果输入字段中的文本是"；xyz"；但不知何故，验证总是错误的。有时，即使输入错误，if语句也是真的。我缺少什么？我该如何做得更好？

import React from 'react';
class LoginForm extends React.Component {
constructor(props){
super(props);
this.state = {username:'' , password:''};
}

Submit = (event)=> {
event.preventDefault();
let user=this.state.username;
if(user == "xyz"){
alert("This works!");
} else{
alert("not working :/");}
}
render() {
return (
<form className="LoginForm" onSubmit={this.Submit}>
<p> Enter here</p>
<input type="text"/>
<input type="submit"/>
</form>
)
}}export default LoginForm

Answer 1

您当前没有捕获输入的onChange。您必须创建一个onChange事件处理程序，如下所示：

import React from "react";
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = { username: "", password: "" };
}
formValidation = () => {
let errors = {};
if (!this.state.username) {
errors.username = "username must not be empty";
}
if (!this.state.password) {
errors.password = "password Must not be empty";
}
return errors;
};
handleInputChange = (field) => (e) =>
this.setState({ [field]: e.target.value });
Submit = (event) => {
event.preventDefault();
let errors = this.formValidation();
if (errors.username) {
alert(errors.username);
}
if (errors.password) {
alert(errors.password);
}
if (!errors.username && !errors.password) {
alert("success");
}
};
render() {
console.log(this.state.username);
return (
<form className="LoginForm" onSubmit={this.Submit}>
<p> Enter here</p>
<input
onChange={this.handleInputChange("username")}
value={this.state.username}
type="text"
placeholder="username"
/>
<input
onChange={this.handleInputChange("password")}
value={this.state.password}
type="text"
placeholder="password"
/>
<input type="submit" />
</form>
);
}
}
export default LoginForm;

我还创建了一个formValidation函数，它返回一个对我来说更干净的错误对象。

这是一支代码笔，可以查看代码的作用：https://codesandbox.io/s/determined-morning-rpzd2?file=/src/App.js

编辑：我已经更新了一个涉及两个输入的用例的答案。