Created
July 24, 2023 06:27
-
-
Save alexsoyes/7a007bdaf8123add567aceb556a7d04f to your computer and use it in GitHub Desktop.
Formulaire de contact React créé avec ChatGPT 3.5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Je suis développeur React et j'aimerais un composant qui permet de créer un formulaire de contact avec nom, prénom, email et message. | |
*/ | |
import React, { useState } from 'react'; | |
const ContactForm = () => { | |
// State pour stocker les valeurs des champs du formulaire | |
const [formData, setFormData] = useState({ | |
firstName: '', | |
lastName: '', | |
email: '', | |
message: '', | |
}); | |
// Gestionnaire de changement pour mettre à jour les valeurs des champs | |
const handleChange = (e) => { | |
const { name, value } = e.target; | |
setFormData((prevState) => ({ | |
...prevState, | |
[name]: value, | |
})); | |
}; | |
// Gestionnaire de soumission du formulaire | |
const handleSubmit = (e) => { | |
e.preventDefault(); | |
// Vous pouvez insérer ici le code pour soumettre les données à votre serveur ou effectuer d'autres actions. | |
console.log(formData); | |
// Réinitialiser le formulaire après la soumission | |
setFormData({ | |
firstName: '', | |
lastName: '', | |
email: '', | |
message: '', | |
}); | |
}; | |
return ( | |
<form onSubmit={handleSubmit}> | |
<div> | |
<label htmlFor="firstName">Prénom:</label> | |
<input | |
type="text" | |
id="firstName" | |
name="firstName" | |
value={formData.firstName} | |
onChange={handleChange} | |
required | |
/> | |
</div> | |
<div> | |
<label htmlFor="lastName">Nom:</label> | |
<input | |
type="text" | |
id="lastName" | |
name="lastName" | |
value={formData.lastName} | |
onChange={handleChange} | |
required | |
/> | |
</div> | |
<div> | |
<label htmlFor="email">Email:</label> | |
<input | |
type="email" | |
id="email" | |
name="email" | |
value={formData.email} | |
onChange={handleChange} | |
required | |
/> | |
</div> | |
<div> | |
<label htmlFor="message">Message:</label> | |
<textarea | |
id="message" | |
name="message" | |
value={formData.message} | |
onChange={handleChange} | |
required | |
/> | |
</div> | |
<button type="submit">Envoyer</button> | |
</form> | |
); | |
}; | |
export default ContactForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment