0

我正在使用 reactJS 登录表单。我想在配置文件中输入电子邮件和密码的值。例如，电子邮件应为：xxx@gmail.com，密码应为：密码。我能够设置 this.state.email 和 this.state.passsword 值，但我无法弄清楚如何将这些值与配置文件中的默认值进行比较。有人可以帮我解决这个问题吗？谢谢。

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;
4

2 回答 2

0

您缺少初始值。你可以这样写你的构造函数：

constructor() {
    super();
    this.state = {
        email: 'xxx@gmail.com',
        password: 'password',
        everFocusedEmail: false,
        everFocusedPassword: false,
    };
}
于 2018-04-02T13:12:40.410 回答
0

假设您的配置文件是一个 json 文件。它包含以下信息。

//config.js
{
  "user" : {
    "email": "xyz@gmail.com",
    "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 
    }
}

希望能帮助到你。

于 2018-04-03T02:13:58.737 回答