正在验证react中的输入字段

Question

我是新手，我创建了一个登录表单，其中包含一些验证，以在用户名或密码为空的情况下引发错误。在第一个实例中，当不插入任何内容并单击Submit时，它可以正常工作。但是，一旦使用用户插入的值更改了值，然后从文本输入中删除，变量就会获得值"，并且永远不会返回到null值。这避免了我插入!this.state.username时的特殊处理。它在那一刻被卡住了，表单提交无论如何都会转到服务器。我也试过修剪，但不起作用

class LoginClassComponent extends React.Component {

constructor(props) {
super(props);
this.state = {
username: this.props.username,
password: this.props.password,
errorUsername: null,
errorPassword: null,
};
this.handleValidation = this.handleValidation.bind(this);
this.handleChange = this.handleChange.bind(this);

}

//assign textbox values to props
handleChange = (e) => {
this.setState({
[e.target.name]: [e.target.value],
});
};
//handle input validation
handleValidation = (event) => {
if (!this.state.username) {
this.setState({ errorUsername: "Please enter User Name" });
event.preventDefault();
}
if (!this.state.password) {
this.setState({ errorPassword: "Please enter Password" });
event.preventDefault();
}

Answer 1

您的handleChange不正确，您应该删除值周围的括号：

handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
};

Answer 2

对于这个场景，我会使用函数组件和钩子，但为了简单起见，并且不知道实现的其余部分是什么样子，我会如下所示。假设您在字段模糊或提交点击时触发handleValidation，请尝试如下修改：

handleValidation = (event) => {
event.preventDefault();
let errorUsername = null;
let errorPassword = null;
if (event.target.name === 'username') {
errorUsername = (event.target.value === '') ? "Please enter User Name" : null;
} else if (event.target.name === 'password') {
errorPassword = (event.target.value === '') ? "Please enter Password" : null;
}
this.setState({ errorUsername, errorPassword });
}

如果你需要任何进一步的帮助，请告诉我。

干杯！