使用Ajax在React.js中提交表单

在React.js中创建我的第一个应用程序，并希望将联系表单提交给使用Ajax的电子邮件。 我已经将此解决方案用作指南： https ： //liusashmily.wordpress.com/author/liusashmily/但完整的组件文件不可用，只有部分而且我无法联系到作者。

联系组件

// Create Component class Contact extends React.Component { constructor(props){ super(props); this.state = { contactEmail: '', contactMessage: '' }; this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); this.handleChangeMsg = this.handleChangeMsg.bind(this); } handleChange(event) { this.setState({ contactEmail: event.target.value, }); } handleChangeMsg(event) { this.setState({ contactMessage: event.target.value }); } handleSubmit(event) { event.preventDefault(); this.setState({ type: 'info', message: 'Sending…' }); $.ajax({ url: 'php/mailer.php', type: 'POST', data: { 'form_email': this.state.contactEmail, 'form_msg': this.state.contactMessage }, cache: false, success: function(data) { // Success.. this.setState({ type: 'success', message: 'We have received your message and will get in touch shortly. Thanks!' }); }.bind(this), error: function(xhr, status, err) { this.setState({ type: 'danger', message: 'Sorry, there has been an error. Please try again later or visit us at SZB 438.' }); }.bind(this) }); } render() { return ( 
 
 Email  Meddelande   
 
 ) } } 

我的PHP文件mailer.php

 <?php if ($_SERVER["REQUEST_METHOD"] == "POST") { // $name = strip_tags(trim($_POST[“form_name”])); // $name = str_replace(array(“\r”,”\n”),array(” “,” “),$name); $email = filter_var(trim($_POST["formEmail"]), FILTER_SANITIZE_EMAIL); $message = trim($_POST["formMsg"]); // Check that data was sent to the mailer. if ( empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) { // Set a 400 (bad request) response code and exit. http_response_code(400); echo "Oops! There was a problem with your submission. Please complete the form and try again."; exit; } // Set the recipient email address. $recipient = "[e-mail]"; // Set the email subject. $subject = "New message from $email Via React Site"; // Build the email content. $email_content .= "Email: $email\n\n"; $email_content .= "Message: \n$message\n"; // Build the email headers. $email_headers = "From: "; // Send the email. if (mail($recipient, $subject, $email_content, $email_headers)) { // Set a 200 (okay) response code. http_response_code(200); echo "Thank You! Your message has been sent."; } else { // Set a 500 (internal server error) response code. http_response_code(500); echo "Oops! Something went wrong and we couldn't send your message."; } } else { // Not a POST request, set a 403 (forbidden) response code. http_response_code(403); echo "There was a problem with your submission, please try again."; } ?> 

在控制台日志中出现以下错误：

POST http：// localhost：8080 / php / mailer.php 404（未找到）

..并且它说错误在“jquery-3.2.1.min.js：4”文件中。

我在html doc中包含了jQuery脚本：

       <!--  -->    
    

对任何输入都非常感激！

Answer 1

我找到了解决方案。 这是我的联系人组件：

 import React, { Component } from 'react'; // Contact component render contact form class Contact extends React.Component { constructor(props){ super(props); this.state = { contactEmail: '', contactMessage: '' }; this._handleSubmit = this._handleSubmit.bind(this); this._handleChange = this._handleChange.bind(this); this._handleChangeMsg = this._handleChangeMsg.bind(this); } // Change state of input field so text is updated while typing _handleChange(e) { this.setState({ contactEmail: e.target.value, }); } // Change state of input field so text is updated while typing _handleChangeMsg(e) { this.setState({ contactMessage: e.target.value }); } _handleSubmit(e) { e.preventDefault(); this.setState({ contactEmail: '', contactMessage: '' }); $.ajax({ url: process.env.NODE_ENV !== "production" ? '/getMail' : "http://www.fransbernhard.se/magden/php/mailer.php", type: 'POST', data: { 'form_email': this.state.contactEmail, 'form_msg': this.state.contactMessage }, cache: false, success: function(data) { // Success.. this.setState({ contactEmail: 'success', contactMessage: '
Kontakt skickad!
Återkommer så fort som möjligt.
' }); $('#formContact').slideUp(); $('#formContact').after(this.state.contactMessage); console.log('success', data); }.bind(this), // Fail.. error: function(xhr, status, err) { console.log(xhr, status); console.log(err); this.setState({ contactEmail: 'danger', contactMessage: '
Sorry det blev fel
Försök gärna igen, eller mejla mig direkt på [e-mail]
' }); console.log(this.state.contactEmail + this.state.contactMessage + 'fail'); }.bind(this) }); } render() { return ( 
 
 
 Email  Meddelande   
 
 
 ) } } export default Contact; 

mailer.php文件：