Il s'agit d'un problème ReactJS.
Je ne peux pas réinitialiser plusieurs champs de saisie d'un formulaire.
Il existe un formulaire dans mon application qui comporte plusieurs champs de saisie , J'utilise une fonction onChange pour récupérer les entrées utilisateur, puis je mets à jour this.state avec setState , puis je copie toutes les valeurs de this.state avec un opérateur spread et créez un nouvel objet stockant ces valeurs copiées. Enfin, je passe le nouvel objet dans une fonction pour une utilisation ultérieure (sans objet). Mon problème de code est que je ne peux pas vider les champs après avoir passé l'objet dans une fonction. J'ai essayé de réinitialiser manuellement les valeurs en effaçant les valeurs avec this.setState , ainsi qu'avec event.target.reset () , mais les deux ne fonctionnent pas. P >
import React, { Component } from "react";
class AddFishForm extends Component {
// Controlled state
state = {
name: "",
price: "",
status: "available",
desc: "",
image: ""
};
// Step 1: onChange: Update this.state
updateFishState = event => {
const { name, value } = event.target;
this.setState({
[name]: value
});
};
// Step 2: onSubmit: Create Fish Object
createFish = event => {
// prevent refresh
event.preventDefault();
// copy values inside this.state and paste into new fish object
const fish = {
name: this.state.name,
price: parseFloat(this.state.price),
status: this.state.status,
desc: this.state.desc,
image: this.state.image
};
// pass new fish object into addFish() in App.js
this.props.addFish(fish);
// ! reset form (NOT WORKING) !
event.currentTarget.reset();
};
render() {
return (
<form className="fish-edit" onSubmit={this.createFish}>
<input
name="name"
value={this.state.name}
type="text"
placeholder="name"
onChange={this.updateFishState}
/>
<input
name="price"
value={this.state.price}
type="text"
placeholder="price"
onChange={this.updateFishState}
/>
<select
name="status"
// Value equals to whichever option is selected
value={this.optionsState}
onChange={this.updateFishState}
>
<option value="available">Fresh!</option>
<option value="unavailable">Sold Out!</option>
</select>
<textarea
name="desc"
value={this.state.desc}
type="text"
placeholder="Enter description..."
onChange={this.updateFishState}
/>
<input
name="image"
value={this.state.image}
type="text"
placeholder="image"
onChange={this.updateFishState}
/>
<button type="submit">Add Fish</button>
</form>
);
}
}
export default AddFishForm;
Je m'attends à ce que le formulaire soit effacé avec "event.currentTarget.reset ();", mais les entrées persistent après la soumission du formulaire. Aide?
3 Réponses :
Ce n'est pas ainsi que React fonctionne. Lorsque vous créez une entrée contrôlée dans React, ses valeurs sont contrôlées par l'état du composant. Il vous suffit de supprimer event.currentTarget.reset (); et de le remplacer par un simple setState qui réinitialise les valeurs de votre formulaire.
this.setState({
name: "",
price: "",
status: "available",
desc: "",
image: ""
});
Cela réinitialisera les valeurs, et react rendra le formulaire vide.
J'espère que cela vous aidera!
Parfait, ça a marché! Merci. Ce serait cool si vous pouviez élaborer plus sur ce que vous entendez par "Lorsque vous créez une entrée contrôlée dans React, sa valeur est contrôlée par l'état du composant"
Désolé de ne pas avoir été élaboré depuis le début. Le fait est que les entrées «contrôlées» dans React conservent leur propre état via onChange , qui change la valeur de l'état. La fonction native .reset () , ne modifie pas les valeurs dans l'état du composant. Par conséquent, notre contribution continue simplement d'utiliser la valeur existante de l'état.
Parfait! Merci Stanko.
Puisque vous gérez l'état via votre composant React, la meilleure façon de réinitialiser l'état est de créer une fonction qui redéfinit les valeurs sur une chaîne vide.
La raison pour laquelle form.reset () ne fonctionnera pas, c'est que React limite les types d'événements de formulaire: https: //reactjs.org/docs/events.html#form-events (Comparez avec ce que fait la fonction de réinitialisation: Comment fonctionne form.reset ()? ).
Nous n'obtenons que onChange onInput onInvalid onSubmit
Donc ajoutez quelque chose comme
reset() {
this.setState({name: "", price: "", status: "available",desc: "",image: ""})
}
Appelez cette fonction après avoir addFish.
utilisez cette méthode setState pour changer votre état et renvoyer le composant
this.setState({
name: "",
price: "",
status: "available",
desc: "",
image: ""
})
au lieu de event.currentTarget.reset();
p >