Réagir - changer une entrée incontrôlée

Question

J'ai une simple réagir composant avec la forme qui, je crois, d'avoir une entrée contrôlée:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

Quand je lance mon application, j'obtiens le message d'avertissement suivant:

Avertissement: MyForm est en train de changer incontrôlée de saisie de type texte contrôlé. Éléments d'entrée ne doit pas passer de incontrôlé de contrôlée (ou vice versa). Décider entre l'utilisation contrôlée ou incontrôlée de l'élément d'entrée pour la durée de vie du composant

Je crois que mon entrée est contrôlée car il a une valeur. Je me demande ce que je fais mal?

Je suis à l'aide de Réagir 15.1.0

Answer 1

Je crois que mon entrée est contrôlée car il a une valeur.

Pour une entrée contrôlée, sa valeur doit correspondre à celle d'une variable d'état.

Cette condition n'est pas d'abord rencontré dans votre exemple, car this.state.name n'est pas prévue initialement. Par conséquent, l'entrée est d'abord incontrôlée. Une fois l' onChange gestionnaire est déclenché pour la première fois, this.state.name est défini. À ce stade, la condition ci-dessus est remplie, et l'entrée est considérée comme contrôlée. Ce passage de la non contrôlée de contrôlée produit l'erreur vu ci-dessus.

En initialisant this.state.name dans le constructeur:

par exemple

this.state = { name: '' };

l'entrée sera contrôlé depuis le début, la fixation de la question. Voir Réagir les Composants commandés pour plus d'exemples.

Aucun rapport avec cette erreur, vous devez avoir un seul défaut à l'exportation. Votre code ci-dessus a deux.

Answer 2

Lors de la première de rendre votre composant, this.state.name n'est pas définie, donc il évalue undefined, et vous vous retrouvez en passant value={undefined} votre input.

Lorsque ReactDOM vérifie si un champ est contrôlé, il vérifie pour voir si value != null (à noter que c'est l' !=, pas !==), et depuis undefined == null en JavaScript, il décide que c'est incontrôlée.

Ainsi, lors de l' onFieldChange() est appelé, this.state.name est réglé à une valeur de chaîne, votre contribution va d'être non contrôlée de contrôlée.

Si vous n' this.state = {name: ''} de votre constructeur, car '' != null,, votre apport aura une valeur tout le temps, et que le message disparaîtra.

Answer 3

Une autre approche il pouvait montrer la valeur par défaut à l’intérieur de votre contribution, comme ceci :

Answer 4

Je sais que d'autres ont répondu à cette déjà. Mais l'un des facteur très important qui peut aider d'autres personnes confrontées à la même question:

Vous devez avoir besoin de avoir onChange gestionnaire ajouté dans votre champ de saisie (par exemple, textField, checkbox, radio, etc). Et toujours la poignée de l'activité grâce à l' onChange gestionnaire, comme:

<input ... onChange={ this.myChangeHandler} ... />

et lorsque vous travaillez avec case, alors vous pourriez avoir besoin pour gérer ses checked état avec !! comme:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Référence: https://github.com/facebook/react/issues/6779#issuecomment-326314716

Answer 5

Si les accessoires sur votre composant a été passé en tant qu’État, mettre une valeur par défaut pour vos balises d’entrée