J'essaie d'effacer les données du formulaire une fois que j'ai créé une soumission de formulaire avec Axios. Le message passe bien et la réponse est enregistrée sur la page, mais les données de chaque champ de texte restent sur la page après la soumission.
J'ai essayé d'ajouter une fonction resetForm dans laquelle je remets le formulaire dans son état vide d'origine, mais cela ne fonctionne pas.
import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";
class Contact extends Component {
constructor(props){
super(props);
this.state = {fullName: "", email: "", message: ""};
}
resetForm = () => {
this.baseState = this.state
this.setState(this.baseState)
}
handleForm = e => {
axios.post(
"https://formcarry.com/s/axiosID",
this.state,
{headers: {"Accept": "application/json"}}
)
.then(function (response) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(response.data.title);
})
.catch(function (error) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(error);
});
e.preventDefault();
}
handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });
render() {
return (
<Grid>
<Cell col={6}>
<h2>Contact Me</h2>
<hr/>
<div style={{ width: '100%' }} className="contact-list">
<form onSubmit={this.handleForm}>
<Cell col={12}>
<Textfield type="text" id="fullName" name="fullName" className="full-name"
onChange={this.handleFields}
label="Full name"
floatingLabel
style={{width: '200px'}}
/>
</Cell>
<Cell col={12}>
{/* Textfield with floating label */}
<Textfield type="email" id="email" name="email" className="email-address"
onChange={this.handleFields}
label="Email address"
floatingLabel
style={{width: '200px'}}
/>
</Cell>
<Cell col={12}>
{/* Floating Multiline Textfield */}
<Textfield name="message" id="message" className="text-body"
onChange={this.handleFields}
label="Your message..."
rows={10}
style={{width: '400px'}}
/>
</Cell>
<Button raised accent ripple type="submit" onClick={this.resetForm}>Send</Button>
<div className="success-message">
<label></label>
</div>
</form>
</div>
</Cell>
</Grid>
)
}
}
export default Contact;
Tout ce que je veux vraiment, c'est que les champs de texte fullName, email et message soient effacés une fois que j'ai soumis le formulaire, mais les données restent sur la page .
5 Réponses :
Vous pouvez faire quelque chose comme
resetForm = () => {
this.setState({fullName: "", email: "", message: ""});
}
Cela réinitialiserait ces valeurs à zéro.
Merci les gars. J'ai essayé toutes ces méthodes mais aucune d'entre elles ne semble fonctionner.
Votre état est mis à jour lorsque vous modifiez l'entrée du formulaire.
resetForm = () => {
this.setState({fullName: "", email: "", message: ""})
}
L'état n'est pas un objet statique.
Vous devrez mettre à jour manuellement les valeurs des champs.
handleFields = e => this.setState({ [e.target.name]: 'e.target.value' });
p>
Vous devez effacer l'état après la soumission. Après avoir appelé setState, le rendu de réaction sera à nouveau appelé avec les valeurs vides que nous avons définies, j'espère que cela aidera
.then(function (response) {
let successMessage = document.querySelector('.success-message');
// here clear the state,
this.setState({
fullName: '',
email: '',
message: '',
});
successMessage.innerHTML = JSON.stringify(response.data.title);
})
Vous n'avez pas besoin de la fonction resetForm (supprimez-la complètement), définissez simplement votre état dans le handleForm comme ceci:
UPDATE: Vous devez également ajouter la valeur prop à chaque input pour en faire une entrée contrôlée voir ci-dessous:
import React, { Component } from 'react';
import { Grid, Cell, Textfield, Button } from 'react-mdl';
import './Contact.css';
import axios from "axios";
class Contact extends Component {
constructor(props) {
super(props);
this.state = { fullName: "", email: "", message: "" };
}
handleForm = e => {
axios.post(
"https://formcarry.com/s/axiosID",
this.state,
{ headers: { "Accept": "application/json" } }
)
.then(function (response) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(response.data.title);
})
.catch(function (error) {
let successMessage = document.querySelector('.success-message');
successMessage.innerHTML = JSON.stringify(error);
});
e.preventDefault();
this.setState({fullName: '', email: '', message: ''}) // <= here
}
handleFields = e => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Grid>
<Cell col={6}>
<h2>Contact Me</h2>
<hr />
<div style={{ width: '100%' }} className="contact-list">
<form onSubmit={this.handleForm}>
<Cell col={12}>
<Textfield type="text" id="fullName" name="fullName" className="full-name"
onChange={this.handleFields}
value={this.state.fullName} // <= here
label="Full name"
floatingLabel
style={{ width: '200px' }}
/>
</Cell>
<Cell col={12}>
{/* Textfield with floating label */}
<Textfield type="email" id="email" name="email" className="email-address"
onChange={this.handleFields}
value={this.state.email} // <= here
label="Email address"
floatingLabel
style={{ width: '200px' }}
/>
</Cell>
<Cell col={12}>
{/* Floating Multiline Textfield */}
<Textfield name="message" id="message" className="text-body"
onChange={this.handleFields}
value={this.state.message} // <= here
label="Your message..."
rows={10}
style={{ width: '400px' }}
/>
</Cell>
<Button raised accent ripple type="submit">Send</Button>
<div className="success-message">
<label></label>
</div>
</form>
</div>
</Cell>
</Grid>
)
}
}
export default Contact;
En remarque: regardez dans React refs pour saisir les éléments dom ... en savoir plus ici: https://reactjs.org/docs/refs-and-the-dom.html
Merci SakoBu. Même problème. Cela ne génère aucune erreur, mais même après avoir essayé votre méthode, cela ne résout toujours pas.
@Ang - oh, c'est aussi parce que ce n'est pas une entrée contrôlée ... je vais mettre à jour ma réponse ...
J'ai essayé votre code mis à jour, mais chaque fois que je tape dans l'une des zones de texte, il lit e.target.value et je ne peux pas changer les valeurs.
@Ang ... Dans vos handleFields supprimez les guillemets de 'e.target.value', au lieu de la valeur réelle, vous obtenez la chaîne
Depuis le code affiché, il n'est pas visible si les valeurs des champs de formulaire ont été attribuées par les valeurs de l'état. (par exemple pour le champ fullName: value = this.state.fullName ). Si la valeur n'avait pas été attribuée, le formulaire n'aurait pas été rendu à nouveau, même si setState avait été correctement défini.