Как я могу перенаправить на js компонент и отправить информацию в db через php после нажатия на кнопку отправить?

Question

После нажатия submit меня перенаправляют на Home.js без проблем, но никакая информация не отправляется в БД.

Однако, если я избавлюсь от перенаправления, тогда данные будут отправлены на БД без проблем, но это не перенаправит меня на Home.js.Вместо этого он перенаправляет меня на demo.php

Цель : Как я могу успешно перенаправить на Home.js (которым я сейчас являюсь) и одновременно отправлять данные в БД?

Что я делаю не так и как я могу это исправить?

Вот Login.js:

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

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            redirect: false
        };
        this.nextPage = this.nextPage.bind(this);
    }

    nextPage(e) {
        e.preventDefault();
        this.setState({redirect: true});
    }

    render() {
        const go = this.state.redirect;

        if(go) return <Home/>;

        return (
            <div>
                <form action="http://localhost/demo_react/api/demo.php" onSubmit={(e) => this.nextPage(e)} method={"POST"} encType="multipart/form-data">

                    <div className="form-group">
                        <label htmlFor="username">Email</label>
                        <input className="form-control" type="text" name="username"/>
                    </div>

                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <input className="form-control" type="password" name="password"/>
                    </div>

                    <button className="btn btn-primary" value="Login" name={"submit"}>Submit</button>

                </form>
            </div>
        );
    }
}

export default Login;

Вот demo.php:

$connection = mysqli_connect("localhost", "root", "", "loginapp");
$username = $_POST['username'];
$password = $_POST['password'];

if(isset($_POST['submit'])) {
    $query = "INSERT INTO users(username, password) ";
    $query .= " VALUES('$username', '$password')";

    $result = mysqli_query($connection, $query);

    if (!$result) {
        die("Query failed" . mysqli_error($connection));
    } else {
        echo "Data send successfully to SQL";
    }
}

Answer 1

Когда вы звоните e.preventDefault(), вы указываете браузеру не отправлять данные формы автоматически.Вместо этого вы должны выполнить эту задачу самостоятельно.

Внутри метода nextPage(e) вы должны получить данные формы и выполнить запрос POST ajax на ваш сервер.Возможно, вам следует использовать состояние компонента для хранения любого пользовательского ввода.

Вот один из способов, которым вы могли бы это сделать.

export default class FormComponent extends Component {
  state = {
    name: "",
    surname: ""
  };

  submitForm(e) {
    e.preventDefault();

    const formData = new FormData();
    formData.append("json", JSON.stringify(this.state));

    fetch("http://localhost/demo_react/api/demo.php", {
      method: "POST",
      body: formData
    });
  }

  render() {
    return (
      <form action="post">
        <div>
          <label htmlFor="name">Name</label>
          <input
            name="name"
            type="text"
            value={this.state.name}
            onChange={e => this.setState({ name: e.target.value })}
          />
        </div>

        <div>
          <label htmlFor="surname">Surname</label>
          <input
            name="surname"
            type="text"
            value={this.state.surname}
            onChange={e => this.setState({ surname: e.target.value })}
          />
          <button type="submit" onClick={e => this.submitForm(e)}>
            Submit
          </button>
        </div>
      </form>
    );
  }
}