验证 Material UI TextField 提交

Question

我正在尝试为登录的用户验证我的 email 和密码 TextField。我能够通过我的handleSubmit function 捕获错误，但不确定如何将这些错误实现到 MaterialUI error和helperText字段中。

请注意，我同时使用material-ui和react-bootstrap ，这就是它们混合使用的原因。

Login.js - email 和密码 TextField(s) 在哪里

import React, { Component } from 'react';

import firebase from '../firebase';

import { FiLogIn } from 'react-icons/fi';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField'

import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';

export class Login extends Component {
    state = {
        email : "",
        password : ""
    };
    handleChange = (e) => {
        const { id, value } = e.target
        this.setState(prevState => ({
            ...prevState,
            [id] : value
        }))
    };
    handleSubmit = (e) => {
        e.preventDefault();

        const { email, password } = this.state;
        firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            // User is signed in
        })
        .catch((error) => {
            // Error
        });
    };
    render() {
        const { email, password } = this.state;
        return (
            <>
                <Form className="sign-in-form">
                    <Form.Row className="align-items-center">
                        <Col xs="auto">
                            <Form.Group controlId="email">
                                <Form.Label srOnly>Email Address</Form.Label>
                                <TextField
                                    id="email"
                                    label="Email"
                                    type="email"
                                    variant="outlined"
                                    aria-describedby="emailHelp"
                                    placeholder="Enter email"
                                    value={email}
                                    onChange={this.handleChange}
                                    
                                />
                            </Form.Group>
                        </Col>
                        <Col xs="auto">
                            <Form.Group controlId="password">
                                <Form.Label srOnly>Password</Form.Label>
                                <TextField
                                    id="password"
                                    label="Password"
                                    variant="outlined" 
                                    type="password"
                                    placeholder="Enter password"
                                    value={password}
                                    onChange={this.handleChange}
                                />
                            </Form.Group>
                        </Col>
                    </Form.Row>
                </Form>
                <Button variant="contained" color="primary" className="login" type="submit" onClick={this.handleSubmit}><FiLogIn className="loginIcon" /> Login</Button>
            </>
        )
    }
}

处理提交 Function - 其中 firebase 验证错误被捕获

    handleSubmit = (e) => {
        e.preventDefault();

        const { email, password } = this.state;
        firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            // User is signed in
        })
        .catch((error) => {
            // Error
        });
    };

让我知道我可以在这里做什么，我对 React 比较陌生，并且一直在寻求学习新事物。

Answer 1

为错误制作一个 state：

state = {
    email : "",
    password : "",
    error:"",
};

在捕获错误时更改它：

    .catch((error) => {
        this.setState({error: error.response.data}) // change it to your error response 
    });

你的输入应该是这样的：

<FormControl error={error}>
    <InputLabel htmlFor="email">Email</InputLabel>
    <Input
      id="email"
      value={email}
      onChange={this.handleChange}
      aria-describedby="email"
    />
   <FormHelperText id="email"> {error ? error : "Enter your email address"}</FormHelperText>
</FormControl>

请记住使用 handleChange 清除错误 state。

Answer 2

试试这个方法：

将error state 添加到您的组件：

state =  {
        email : "",
        password : "",
        error : false,
        errMsg : "" 
    };

然后在从句柄提交中的handleSubmit auth 操作引发错误时更改它：

.catch((error) => {
            this.state = {error : true, errMsg: error.msg};
        });

最后，添加条件 TextField 以显示错误消息：

{error &&    <TextField
              error
              id="yourErrorId"
              helperText=this.state.errMsg
              variant="outlined"
            />}