[英]Validate Material UI TextField Submit
I'm trying to validate my email and password TextField(s) for a user logging in. I'm able to catch errors via my handleSubmit
function, but unsure of how to implement those errors into the MaterialUI error
and helperText
fields.我正在尝试为登录的用户验证我的 email 和密码 TextField。我能够通过我的
handleSubmit
function 捕获错误,但不确定如何将这些错误实现到 MaterialUI error
和helperText
字段中。
Note, I'm using both material-ui
and react-bootstrap
, that's why they're mixed.请注意,我同时使用
material-ui
和react-bootstrap
,这就是它们混合使用的原因。
Login.js - where the email and password TextField(s) are 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>
</>
)
}
}
handleSubmit Function - where firebase validation errors are caught处理提交 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
});
};
Let me know of what I can do here, I'm relatively new with React and always looking to learn new things.让我知道我可以在这里做什么,我对 React 比较陌生,并且一直在寻求学习新事物。
Make an state for error:为错误制作一个 state:
state = {
email : "",
password : "",
error:"",
};
Change it on catching error:在捕获错误时更改它:
.catch((error) => {
this.setState({error: error.response.data}) // change it to your error response
});
And your input should be something like this:你的输入应该是这样的:
<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>
Remember to clear error state with handleChange.请记住使用 handleChange 清除错误 state。
Try this approach:试试这个方法:
add an error
state to your component:将
error
state 添加到您的组件:
state = {
email : "",
password : "",
error : false,
errMsg : ""
};
then change it when error is thrown from the firebase auth action inside handleSubmit
:然后在从句柄提交中的
handleSubmit
auth 操作引发错误时更改它:
.catch((error) => {
this.state = {error : true, errMsg: error.msg};
});
last, add a conditional TextField to show the error message:最后,添加条件 TextField 以显示错误消息:
{error && <TextField
error
id="yourErrorId"
helperText=this.state.errMsg
variant="outlined"
/>}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.