提交时表单无法重定向到另一个页面 - ReactJS

Question

我试图弄清楚为什么我的表单在接受用户名和密码后无法重定向用户。表单从以下 API/json 接收它的值：http://myjson.com/file/ ...所以我有一个函数，它由一个 if 语句组成，它检查用户名和密码，但是当我单击提交按钮时，页面重新加载。目前API/json中的Password设置为null。

我的问题：由于 API/json 中的密码为空，密码字段应该接受任何值吗？

代码：

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';
import './Login.css';

class Login extends Component {  

    state = { data: [] }

    constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event){
        this.setState({value: event.target.value});
    }

    handleSubmit(event){
        //alert('A name was submitted: ' + this.state.value);
        this.processInfo();
        event.preventDefault();
    }

    processInfo() {
        if (this.state.username.value == '{userName}' && this.state.password == '{password}' ){
            return <Redirect to='/MemberInfo.jsx' />
        }
    }

    componentWillMount(){
        fetch('https://api.myjson.com/bins/14lgnb', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
            body: JSON.stringify({
                username: 'userName',
                password: 'password',
            })
        }

        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }

    //render component
    render() {
    console.log(this.state.data);
        return (
            <div>

                <div className="container">

                <div className="loginContainer">
                    <h2>Member Login</h2>
                    <form onSubmit={this.handleSubmit}>
                        <div className="form-group">
                            <label for="username">User Name:</label>
                            <input type="text" id="{userName}" value={this.state.value} onChange={this.handleChange} class="form-control"  placeholder="Enter User Name"  />
                        </div>
                        <div className="form-group"> 
                            <label for="pwd">Password:</label>
                            <input type="password" id="{password}" class="form-control"  placeholder="Enter password" name="password" />
                        </div>
                        <div>

                             <input type="submit" value="submit" className="btn btn-primary" /> 
                        </div>
                   </form>
                </div>
            </div>

            </div> 

        );
      }
}

export default Login

我能得到一些指导吗？正如我所提到的，我是 ReactJS 的新手。谢谢

Answer 1

我在您的代码中发现了很多问题。 首先，您可以使用“react-router-dom”中的 withRouter 进行重定向

import { withRouter } from 'react-router-dom'

   processInfo() {
    if (this.state.username.value == '{userName}' && this.state.password == '{password}' ){

      //Add your route there
        this.props.history.push("/yourRoute");
    }
}

export default withRouter(Login);