Есть две формы,регисnрация и авторизация.С регистрацией все норм. Проблема в том что если я сначала вписываю почту первым то вылетает ошибка в консоль,а если начинаю вписывать сначала пароль,а потом почту то все ок.
Дело в том что инпут регистрации идентичет авторизации и я не пойму в чем проблема.
import React from "react";
import classes from "./auth.module.scss";
import { Field, reduxForm } from "redux-form";
import { required, PasswordCheck } from "../../untils/validators/validators";
import { authInput } from "../commons/formsControls/formsControls";
import { UserisAuth } from "../../redux/authReducer";
const FormBox = props => {
const MinValue=PasswordCheck(5)
return (
<form onSubmit={props.handleSubmit}>
<div>
<label htmlFor="email">Емейл</label>
<Field component={authInput} type="email" name="email" validate={[required,]}/>
</div>
<div>
<label htmlFor="password">Пароль</label>
<Field component={authInput} type="password" name="password" validate={[required,MinValue]}/>
</div>
<div>
<button className={classes.submited}>Войти</button>
</div>
</form>
);
};
const LoginForm = reduxForm({
form: "login"
})(FormBox);
const Login = (formData) => {
let onSubmit=(formData)=>{
//UserisAuth(formData)
console.log(formData)
}
return (
<div className={classes.formbox}>
<div className={classes.form}>
<h5 className={classes.formtitle}>Вход</h5>
<LoginForm onSubmit={onSubmit}></LoginForm>
</div>
</div>
);
};
export default Login;
Validator
export const required = value => {
if (value) return undefined;
return "Это обязательное поле";
};
export const PasswordCheck = MinValue => value => {
if (value.length < MinValue) return `Пароль не может быть меньше ${MinValue} символов`;
return undefined;
};
Вообщем надо const MinValue=PasswordCheck(5) вынести за процедуру и все работает.
Сам спросил,сам ответил
import React from "react";
import classes from "./auth.module.scss";
import { Field, reduxForm } from "redux-form";
import { authInput } from "../commons/formsControls/formsControls";
import { required, PasswordCheck } from "../../untils/validators/validators";
const MinValue=PasswordCheck(5)
const SignUpBox = props => {
return (
<form onSubmit={props.handleSubmit}>
<div>
<label htmlFor="FIO">ФИО</label>
<Field component={authInput} type="text" name="FIO" validate={[required,]}/>
</div>
<div>
<label htmlFor="username">Никнейм</label>
<Field component={authInput} type="text" name="username" validate={[required,]}/>
</div>
<div>
<label htmlFor="email">Емейл</label>
<Field component={authInput} type="email" name="email" validate={[required,]}/>
</div>
<div>
<label htmlFor="password">Пароль</label>
<Field component={authInput} type="password" name="password" validate={[required,MinValue]}/>
</div>
<div>
<button className={classes.submited}>Завершить</button>
</div>
</form>
);
};
const SignUpForm = reduxForm({
form: "signUp"
})(SignUpBox);
const SignUp = () => {
let onSubmit=(formData)=>{
console.log(formData)
}
return (
<div className={classes.formbox}>
<div className={classes.form}>
<h5 className={classes.formtitle}>Регистрация</h5>
<SignUpForm onSubmit={onSubmit}></SignUpForm>
</div>
</div>
);
};
export default SignUp;
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости