Маршрутизация для файла PHP из React + Next. js - PullRequest
Новая
       76

Маршрутизация для файла PHP из React + Next. js

0 голосов
/ 27 мая 2020

Я создал контактную форму на React. js + Next. js. Выглядит это так: 

<div className="contact-form">
                <form id="contactForm">
                    <div className="row">
                        <div className="col-lg-6 col-md-6">
                            <div className="form-group">
                                <input type="text" name="name" id="name" className="form-control" placeholder="Name" required value={this.state.name} onChange={e => this.setState({ name: e.target.value })}/>
                            </div>
                        </div>

                        <div className="col-lg-6 col-md-6">
                            <div className="form-group">
                                <input type="email" name="email" id="email" className="form-control" required placeholder="Email" required value={this.state.email} onChange={e => this.setState({ email: e.target.value })}/>
                            </div>
                        </div>

                        <div className="col-lg-6 col-md-6">
                            <div className="form-group">
                                <input type="text" name="phone_number" id="phone_number" required className="form-control" placeholder="Phone" value={this.state.phone_number} onChange={e => this.setState({ phone_number: e.target.value })}/>
                            </div>
                        </div>

                        <div className="col-lg-6 col-md-6">
                            <div className="form-group">
                                <input type="text" name="msg_subject" id="msg_subject" className="form-control" placeholder="Subject" required value={this.state.msg_subject} onChange={e => this.setState({ msg_subject: e.target.value })}/>
                            </div>
                        </div>

                        <div className="col-lg-12 col-md-12">
                            <div className="form-group">
                                <textarea name="message" className="form-control" id="message" rows="6" placeholder="Message" required onChange={e => this.setState({ message: e.target.value })} value={this.state.message}></textarea>
                            </div>
                        </div>

                        <div className="col-lg-12 col-md-12">
                            <button type="submit" className="btn btn-primary" onClick={e => this.handleFormSubmit(e)} value="Submit">Send</button>
                        </div>
                        {this.state.mailSent &&
                        <div>Thank you for contcting us.</div>
                        }
                    </div>
                </form>
            </div>

И создал обработчик, который будет отправлять данные в файл PHP с помощью Ax ios: 

import React, { Component } from 'react';
import axios from 'axios';

const API_PATH = 'http://localhost:3000/index.php';

class ContactForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: '',
            phone_number: '',
            msg_subject: '',
            message: '',
            mailSent: false,
            error: null
        }
    }

    handleFormSubmit = e => {
        e.preventDefault();
        axios({
            method: 'post',
            url: `${API_PATH}`,
            headers: { 'content-type': 'application/json' },
            data: this.state
        })
            .then(result => {
                this.setState({
                    mailSent: result.data.sent
                })
            })
            .catch(error => this.setState({ error: error.message }));
    };

Но когда я пытаюсь это сделать, я получаю ошибку 404. Я пробовал создавать разные папки и обращаться к ним через браузер, но всегда перенаправлялся на ошибку 404. Пожалуйста, помогите мне реализовать правильный дизайн, чтобы я мог получить доступ к файлу из этой потребности? Всем спасибо!

...