Как я могу перенаправить на правильную страницу при успешной отправке информации формы?

Question

На данный момент я успешно вставляю информацию в базу данных (SQL, phpMyAdmin) через Home.js, но проблема в том, что каждый раз, когда пользователь вводит информацию и нажимает 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 () при отправке формы.Кроме того, лучше иметь контролируемые входы (состояние изменения компонента при изменении входа).См. Это для получения дополнительной информации: Получить данные формы в 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();
    });
}

В конце, вы можете перейти (), когда выборка будет успешной.