Сравнение значений формы входа React со значениями конфигурации по умолчанию

Я работаю с формой входа в систему reactJS. Я хотел бы иметь входное значение для электронной почты и пароля в файле конфигурации. Например, адрес электронной почты должен быть: [email protected], а пароль должен быть: password. Я могу установить значение this.state.email и this.state.password, но я не могу понять, как сравнить эти значения со значениями по умолчанию в файле конфигурации. Может ли кто-нибудь помочь мне с этим? Спасибо.

import React from "react";
import Header from '../../components/header';
import '../../assets/css/style.css';
import { Link } from 'react-router'



function validate(email, password) {
    return {
        email: email.length === 0,
        password: password.length === 0,
    };
}

class LoginForm extends React.Component {
    constructor() {
        super();
        this.state = {
            email: '',
            password: '',
            everFocusedEmail: false,
            everFocusedPassword: false,
        };
    }

handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
}

handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
}

handleSubmit = (evt) => {
    if (!this.canBeSubmitted()) {
        evt.preventDefault();
        return;
    }
}

canBeSubmitted() {
    const errors = validate(this.state.email, this.state.password);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return !isDisabled;
}

render() {
    const errors = validate(this.state.email, this.state.password);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return (
        <div>
            <Header/>
            <div className="container">
                <div className="row">
                    <div className="col-md-4 col-md-offset-4 vertical-center col-sm-8 col-sm-offset-2">
                        <div className="card loginFormDiv">
                            <h3>Login</h3>
                            <form name="loginForm" onSubmit={this.handleSubmit}>
                                <div className="loginForm">
                                    <div className="input-group formInputDiv">
                                      <span className="input-group-addon">
                                        <span className="glyphicon glyphicon-envelope"></span>
                                      </span>
                                        <input type="text" className={`form-control loginForm ${errors.email ? "error" : ""}`} value={this.state.email}
                                               onChange={this.handleEmailChange} placeholder="Enter your email"></input>
                                    </div>
                                    <div className="input-group formInputDiv">
                                      <span className="input-group-addon">
                                          <span className="glyphicon glyphicon-filter"></span>
                                      </span>
                                        <input type="password" className={`form-control loginForm  ${errors.password ? "error" : ""}`}
                                               onChange={this.handlePasswordChange} placeholder="Enter your password"></input>
                                    </div>
                                    <div className="text-right">
                                        <Link to={'/dashboard'}><button type="submit" className="btn btn-primary loginBtn" disabled={isDisabled}>Log In</button></Link>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
    }
}
    export default LoginForm;

reactjs validation react-component login
person vigneshE    schedule 02.04.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вам не хватает начальных значений. Вы можете написать свой конструктор следующим образом:

constructor() {
    super();
    this.state = {
        email: '[email protected]',
        password: 'password',
        everFocusedEmail: false,
        everFocusedPassword: false,
    };
}
person Triyugi Narayan Mani    schedule 02.04.2018
comment
Спасибо за ответ. Не могли бы вы мне предложить лучший способ хранения электронной почты и пароля в файле конфигурации и функции импорта? - person vigneshE; 02.04.2018

arrow_upward
0
arrow_downward

Предположим, ваш файл конфигурации представляет собой файл json. И в нем есть следующая информация.

//config.js
{
  "user" : {
    "email": "[email protected]",
    "password": "1234pass"
  }
}

Теперь в вашем реагирующем компоненте вы можете импортировать этот файл конфигурации и использовать его user.email и user.password по умолчанию и проверять его на соответствие введенному пользователем значению.

//LoginForm.js
import React from "react";
import Header from '../../components/header';
import '../../assets/css/style.css';
import { Link } from 'react-router'

//importing config file
import config from './config.js'; //whatever is the correct path


function validate(email, password) {
    return {
        email: email.length === 0,
        password: password.length === 0,
    };
}

class LoginForm extends React.Component {
    constructor() {
        super();
        this.state = {
            email: '',
            password: '',
            everFocusedEmail: false,
            everFocusedPassword: false,
        };
    }

handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
    if(this.state.email === config.user.email) {
        /* This is checking user input as user types against default 
        email in the config file.
        */

        //do anything 
    }
}

handlePasswordChange = (evt) => {
    this.setState({ password: evt.target.value });
    if(this.state.password === config.user.password) {
        /* This is checking user input as user types against default 
        password in the config file.
        */

        //do anything 
    }
}

Надеюсь, поможет.

person remelkabir    schedule 03.04.2018