Programmiererforum

import React, { useState } from 'react';

function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
subject: '',
message: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
};

const handleSubmit = async (e) => {
e.preventDefault();

try {
const response = await fetch('./server.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});

if (response.ok) {
alert('Email sent successfully!');
// You can redirect the user or perform any other action here
} else {
alert('Error sending email!');
}
} catch (error) {
console.error('Error sending email:', error);
alert('Error sending email!');
}
};

return (


Name:



Email:



Subject:



Message:


Send

);
}

export default ContactForm;

(the Form component is located at: src/assets/Components/Form.js)
(server.php is in the public folder)
(phpmailer directory is in the src dir.)

Ich versuche, den PHP-Mailer in meiner React-Anwendung zu verwenden, da ich ihn später erneut bereitstellen muss. Ich weiß, dass es besser wäre, Express zu verwenden, aber ich muss PHP verwenden :).
Das ist also die Lösung, die ich mir für das Kontaktformular ausgedacht habe.
Ich stoße auf eine Ausgabe. Nach dem Versuch, eine E-Mail zu senden, um zu überprüfen, ob der Server funktioniert, gibt die Konsole Folgendes zurück: [b]POST http://localhost:3000/server.php 404 (Not Found)[/b]
Und ich habe den Pfad zu meiner server.php-Datei überprüft, sodass ich wirklich nicht weiß, wo das Problem liegt.
Ich habe jetzt stundenlang gesucht und kann keine Lösung finden.
Keiner Hilfe wäre wirklich dankbar.
Hier ist meine Formularkomponente:
[code]
import React, { useState } from 'react';

function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
subject: '',
message: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
};

const handleSubmit = async (e) => {
e.preventDefault();

try {
const response = await fetch('./server.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});

if (response.ok) {
alert('Email sent successfully!');
// You can redirect the user or perform any other action here
} else {
alert('Error sending email!');
}
} catch (error) {
console.error('Error sending email:', error);
alert('Error sending email!');
}
};

return (


Name:



Email:



Subject:



Message:


Send

);
}

export default ContactForm;
[/code]
Und hier ist meine server.php-Datei:
[code]
[/code]
Hier ist ein Blick auf meinen Ordner:
[code](the Form component is located at: src/assets/Components/Form.js)
(server.php is in the public folder)
(phpmailer directory is in the src dir.)
[/code]
[img]https://i.sstatic.net/XPKrp.png[/img]

Ich habe versucht, Pfade zu ändern und nach Apache-Versionen zu suchen. Ich habe auch mehrere Tutorials durchgesehen, aber bei mir hat nichts funktioniert.