成功提交表单信息后如何重定向到正确的页面？

Question

到目前为止，我已通过Home.js 成功地将信息插入数据库（SQL、phpMyAdmin），但问题是每次用户输入信息并点击submit，它都会被重定向到我的demo.php文件（未提供）而不是 Next.js。

也就是说，我怎样才能使用户信息成功进入数据库并进入下一页？ （Next.js）？

我做错了什么，我该如何解决？

这里是Home.js：

import React, { Component } from 'react';
import Next from '../Home/Next';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };
        this.getPHP = this.getPHP.bind(this);
        this.goNext = this.goNext.bind(this);
    }

    getPHP() {
        fetch(`http://localhost/demo_react/api/demo.php`, {
            method: 'POST'
        }).then(res => res.json())
            .then(response => {
                console.log('response');
                console.log(response);
            });
    }

    goNext() {
        this.setState({show: true});
    }

    render() {
        const next = this.state.show;

        if(next) {
            return <Next/>;
        }
        return (
            <div>
                <br/>

                <form className="form-control" action="http://localhost/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data">
                    <input type="text" name="username"/>
                    <input type="text" name="password"/>
                    <input type="submit" value="submit" onClick={this.getPHP & this.goNext} name={"submit"}/>
                </form>

            </div>
        );
    }
}

export default Home;

这里是Next.js：

import React, { Component } from 'react';

class Next extends Component {
    render() {
        return(
            <h1>made it</h1>
        );
    }
}

export default Next;

Answer 1

您需要从表单中删除 action 属性并在提交表单时调用 getPHP()。此外，最好有受控输入（输入更改时组件状态更改）。有关更多信息，请参阅此内容：Get form data in Reactjs

<form className="form-control" onSubmit={e => this.getPHP(e)}>
    <input type="text" name="username" value={this.state.username} onChange={e => this.setState({ username: e.target.value })} />
    <input type="text" name="password" value={this.state.password} onChange={e => this.setState({ password: e.target.value })} />
    <input type="submit" value="submit" name="submit" />
</form>

您可以直接在 getPHP() 方法中访问表单值，因为现在可以控制输入：

constructor(props) {
    super(props);
    this.state = {
        show: false,
        username: '',
        password: '',
    };
}

getPHP(e) { 
    e.preventDefault();
    const { username, password } = this.state;
    const formData = new FormData();
    formData.append('username', username);
    formData.append('password', password );

    fetch(`http://localhost/demo_react/api/demo.php`, {
        method: 'POST',
        headers: new Headers({ 'Content-Type': 'multipart/form-data' }),
        body: formData,
    })
    .then(res => res.json())
    .then(response => {
        console.log('response');
        console.log(response);
        this.goNext();
    });
}

最后，获取成功后就可以goNext()了。