A component is changing an uncontrolled input of type text to be controlled : quelle est la solution à ce problème du framework React ?
Le composant est un des éléments de base du framework JavaScript ReactJS. Il représente une partie indépendante d'une application et peut être utilisé plusieurs fois. Le message d'avertissement "A component is changing an uncontrolled input of type text to be controlled" indique un problème au sein de la gestion des champs de formulaire par votre composant.
Lorsque l'on écrit un formulaire avec ReactJS, on peut le faire de 2 façons. On peut écrire un formulaire avec des champs non contrôlés, en l'écrivant directement en HTML. Dans ce cas, vous devez vous-même récupérer les valeurs quand vous en avez besoin.
class MonFormulaire extends Component {
render() {
return (
<div>
<input type="text" name="monChamp"/>
</div>
),
}
}
La deuxième forme consiste à utiliser la syntaxe de React pour créer un formulaire avec des champs contrôlés. Les valeurs sont en permanence stockées par le composant, et le suivi est ainsi facilité.
class MonFormulaire extends Component {
constructor() {
super(),
this.state = {
nom: '',
},
}
render() {
return (
<div>
<input
type="text"
value={this.state.nom}
/>
</div>
),
}
}
Lorsqu'un input est créé avec une de ces 2 méthodes, il ne peut être modifié. Si vous essayez de manipuler un champ non contrôlé comme vous le faites avec un champ contrôlé, alors vous obtiendrez le message d'avertissement et votre code ne fonctionnera pas.
Pour éviter cette erreur, vous devez également bien faire attention à initialiser chaque valeur du formulaire. Si vous ne le faites pas, la valeur de ce champ sera fixée à "undefined" et le champ sera considéré par le framework comme un champ non contrôlé.
// Input
<input
value={this.state.champs["nom"]}
type="text"
/>
//Les champs contenus dans "champs" seront non contrôlés, vous aurez ensuite un message d'avertissement
this.state = { champs: {} }
//Les champs sont ici correctement initialisés
this.state = { champs: {nom : ''} }
//Vous pouvez également utiliser une expression booléenne pour initialiser correctement votre input
<input
value={this.state.champs["nom"] || ''}
type="text"
/>