React - modification d'une entrée non contrôlée

J'ai un composant react simple avec la forme qui je pense 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;

Lorsque j'exécute mon application, j'obtiens l'avertissement suivant:

Avertissement: MyForm modifie une entrée non contrôlée de type texte à contrôler. Les éléments d'entrée ne doivent pas passer de non contrôlé à contrôlé (ou vice versa). Décider entre l'utilisation d'un élément d'entrée contrôlé ou non contrôlé pendant la durée de vie du composant

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

J'utilise React 15.1.0

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

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

Cette condition n'est pas initialement remplie dans votre exemple car elle this.state.namen'est pas initialement définie. Par conséquent, l'entrée est initialement non contrôlée. Une fois que le onChangegestionnaire est déclenché pour la première fois, il this.state.nameest défini. À ce stade, la condition ci-dessus est satisfaite et l'entrée est considérée comme contrôlée. Cette transition de non contrôlé à contrôlé produit l'erreur vue ci-dessus.

En initialisant this.state.namedans le constructeur:

par exemple

this.state = { name: '' };

l'entrée sera contrôlée dès le début, corrigeant le problème. Voir React Controlled Components pour plus d'exemples.

Sans rapport avec cette erreur, vous ne devriez avoir qu'une seule exportation par défaut. Votre code ci-dessus en a deux.

Lorsque vous effectuez le rendu de votre composant pour la première fois, il this.state.namen'est pas défini, il est donc évalué à undefinedou null, et vous finissez par passer à value={undefined}ou value={null}à votre input.

Lorsque ReactDOM vérifie si un champ est contrôlé, il vérifie sivalue != null (notez que ce n'est !=pas le cas !==), et puisque undefined == nulldans JavaScript, il décide qu'il n'est pas contrôlé.

Ainsi, lorsque onFieldChange()est appelé, this.state.nameest défini sur une valeur de chaîne, votre entrée passe de non contrôlée à contrôlée.

Si vous le faites this.state = {name: ''}dans votre constructeur, car '' != nullvotre entrée aura une valeur tout le temps et ce message disparaîtra.

Une autre approche pourrait être de définir la valeur par défaut dans votre entrée, comme ceci:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Je sais que d'autres y ont déjà répondu. Mais un facteur très important ici peut aider d'autres personnes confrontées à un problème similaire:

Vous devez avoir un onChangegestionnaire ajouté dans votre champ de saisie (par exemple textField, case à cocher, radio, etc.). Gérez toujours l'activité via le onChangegestionnaire.

Exemple:

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

Lorsque vous travaillez avec la case à cocher, vous devrez peut-être gérer son checkedétat avec !!.

Exemple:

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

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

Une solution simple pour résoudre ce problème consiste à définir une valeur vide par défaut:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

Un inconvénient potentiel avec la définition de la valeur du champ sur "" (chaîne vide) dans le constructeur est que le champ est un champ facultatif et n'est pas modifié. Sauf si vous effectuez un massage avant de publier votre formulaire, le champ sera conservé dans votre stockage de données sous la forme d'une chaîne vide au lieu de NULL.

Cette alternative évitera les chaînes vides:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

Lorsque vous utilisez onChange={this.onFieldChange('name').bind(this)}dans votre entrée, vous devez déclarer votre chaîne vide d'état comme valeur du champ de propriété.

manière incorrecte:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

manière correcte:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

Dans mon cas, il me manquait quelque chose de vraiment trivial.

<input value={state.myObject.inputValue} />

Mon état était le suivant lorsque j'ai reçu l'avertissement:

state = {
   myObject: undefined
}

En alternant mon état pour référencer l'entrée de ma valeur , mon problème a été résolu:

state = {
   myObject: {
      inputValue: ''
   }
}

Si les accessoires de votre composant ont été passés en tant qu'état, mettez une valeur par défaut pour vos balises d'entrée

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

Définissez une valeur sur la propriété 'name' dans son état initial.

this.state={ name:''};

Une mise à jour pour cela. Pour l'utilisation de React Hooksconst [name, setName] = useState(" ")

Cela ne se produit généralement que lorsque vous ne contrôlez pas la valeur du fichier lorsque l'application a démarré et après un événement ou une fonction déclenchée ou l'état a changé, vous essayez maintenant de contrôler la valeur dans le champ de saisie.

Cette transition de ne pas avoir le contrôle sur l'entrée, puis de le contrôler, est ce qui provoque le problème en premier lieu.

La meilleure façon d'éviter cela est de déclarer une valeur pour l'entrée dans le constructeur du composant. Pour que l'élément d'entrée ait une valeur dès le début de l'application.

Pour définir dynamiquement les propriétés d'état des entrées de formulaire et les garder contrôlées, vous pouvez faire quelque chose comme ceci:

const inputs = [
    { name: 'email', type: 'email', placeholder: "Enter your email"},
    { name: 'password', type: 'password', placeholder: "Enter your password"},
    { name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]

class Form extends Component {
  constructor(props){
    super(props)
    this.state = {} // Notice no explicit state is set in the constructor
  }

  handleChange = (e) => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    }
  }

  handleSubmit = (e) => {
    // do something
  }

  render() {
     <form onSubmit={(e) => handleSubmit(e)}>
       { inputs.length ?
         inputs.map(input => {
           const { name, placeholder, type } = input;
           const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

           return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
       }) :
         null
       }
       <button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
     </form>    
  }
}

Créez simplement un repli sur '' si le this.state.name est null.

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Cela fonctionne également avec les variables useState.