表单验证时,我试图重定向到另一个页面,但是我的工作方式不起作用,我尝试了许多方法,但是没有一个起作用,我的想法将会爆炸。
在该代码上,我试图使用react-router-dom(Router),我真的不知道为什么这不起作用!
请遵循以下代码:
import React from 'react';
import { Redirect } from 'react-router-dom'
import './styles.css'
import Logo from '../../assets/FormRegister/logo.jpg'
class FormRegister extends React.Component {
constructor(props) {
super(props);
this.state = {
fields: {},
errors: {}
}
}
handleValidation() {
let fields = this.state.fields;
let errors = {};
let formIsValid = true;
if (!fields["user"]) {
formIsValid = false;
errors["user"] = "Informe o usuário!";
}
if (!fields["password"]) {
formIsValid = false;
errors["password"] = "Informe a senha!";
}
let number = /\d+/g;
let specialCharacter = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
let alphanumeric = /[A-Za-z0-9]+$/;
if (typeof fields["password"] !== "undefined") {
if (fields["password"].length < 8) {
formIsValid = false;
errors["password"] = "Password deve possuir ao menos 8 caracteres!";
}
if (!specialCharacter.test(fields["password"])) {
formIsValid = false;
errors["password"] = "Password deve conter ao menos 1 caracter especial!";
}
if (!alphanumeric.test(fields["password"])) {
formIsValid = false;
errors["password"] = "Password deve conter ao menos 1 caracter alfanumérico!";
}
}
if (typeof fields["password"] !== "undefined") {
if (!number.test(fields["password"])) {
formIsValid = false;
errors["password"] = "Password deve conter ao menos 1 caracter numérico!";
}
}
if (!fields["confirmPassword"]) {
formIsValid = false;
errors["confirmPassword"] = "Confirme a senha!"
}
if (typeof fields["confirmPassword"] !== "undefined") {
if (fields["password"] !== fields["confirmPassword"]) {
formIsValid = false;
errors["confirmPassword"] = "As senhas não são iguais!";
}
}
this.setState({ errors: errors });
return formIsValid;
}
registerSubmit(e) {
e.preventDefault();
if (this.handleValidation()) {
return <Redirect to="/leads" />
}
}
handleChange(field, e) {
let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({ fields });
}
render() {
return (
<>
<div className="container center-screen">
<div className="main-form center-form">
<div className="div-logo">
<img src={Logo} alt="Logo" className="logo" />
</div>
<div className="div-form">
<form id="form1" onSubmit={this.registerSubmit.bind(this)}>
<label htmlFor="user">Usuário *</label>
<div className="div-form-error">
<span className="form-error">{this.state.errors["user"]}</span>
</div>
<input type="text" name="user" onChange={this.handleChange.bind(this, "user")} value={this.state.fields["user"]} />
<label htmlFor="password">Password *</label>
<div className="div-form-error">
<span className="form-error">{this.state.errors["password"]}</span>
</div>
<input type="password" name="password" placeholder="*******" onChange={this.handleChange.bind(this, "password")} value={this.state.fields["password"]} />
<label htmlFor="confirmPassword" >Confirmação Password *</label>
<div className="div-form-error">
<span className="form-error">{this.state.errors["confirmPassword"]}</span>
</div>
<input type="password" name="confirmPassword" placeholder="*******" onChange={this.handleChange.bind(this, "confirmPassword")} value={this.state.fields["confirmPassword"]} />
<button type="submit" form="form1" value="Submit" className="register">
Registrar
</button>
</form>
</div>
</div>
</div>
</>
);
}
}
export default FormRegister;
您能帮我解决这个问题吗?我将不胜感激!
重定向仅在渲染功能内有效。如果要将用户重定向到另一个URL,则可以使用history.push(url)。
import { withRouter } from 'react-router-dom'
您的registerSubmit函数可以是
registerSubmit(e) {
const { history } = this.props;
e.preventDefault();
if (this.handleValidation()) {
history.push("/leads")
}
}
并用withRouter包装FormRegister
export default withRouter(FormRegister);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句