React Bootstrap如何提示用户错误？

Question

我正在使用React-Bootstrap，目前我正在弄清楚用户错误输入数据时如何提示错误。

例如，用户登录，用户单击登录按钮后，下面的输入文本将显示红色标记错误示例*用户名和密码不匹配

我进行了一些挖掘，发现这个示例没有运气，但是我确实找到了（必填）字段，但这不适用于我的情况。

我的代码如下：

<Form>
   <Label>UserName</Label>
       <InputGroup className="mb-3">
             <Input type="text" onChange={this.Username} placeholder="Enter UserName" />
       </InputGroup>
   <Label>Password</Label>
        <InputGroup className="mb-4">
              <Input type="password" onChange={this.Password} placeholder="Enter Password" />
        </InputGroup>
<Form.Control.Feedback type="valid" color="danger" tooltip>*Username and Password Incorrect</Form.Control.Feedback>
          Button onClick={this.Login} color="success" block>Login</Button>
</Form>

但是似乎Form.Control.Feedback不起作用。

需求

1. 我正在使用React Js
2. 我正在使用React-bootstrap库https://react-bootstrap.github.io/components/forms/

我应该如何执行上述动作？

Answer 1

您是否在提交按钮处理程序中使用form.checkValidity()方法？

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };