Reactjs 验证react中的输入字段

我是一个新手，我创建了一个登录表单，其中包含一些验证，以在用户名或密码为空的情况下引发错误。在第一个实例中，当不插入任何内容并且单击了提交时，它工作正常。但是，一旦值被用户插入的值更改，然后从文本输入中删除，变量将获得“”值，并且永远不会返回到

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);

}

---

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

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

---

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

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 });
}

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

---

干杯！对不起，它坏了。如果（！this.state.USername | | | | this.state.USername.length==0）{//尝试使用1和0 this.setState（{errorUsername:“请输入用户名”}）；event.preventDefault（）；}，我应用了下面的代码{console.log（“用户名：，this.state.USername.USername”）>但当我打印用户名时，它仍然是以下用户名：[“”]0:“长度：1 proto:Array（0）。我知道，您的handleChange中有一个错误，我已更新了我的答案。您也可以在进行此更改后删除第二个测试

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 });
}