Reaccionar: cambiar una entrada no controlada

Tengo un componente de reacción simple con la forma que creo que tiene una entrada controlada:

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;

Cuando ejecuto mi aplicación, aparece la siguiente advertencia:

Advertencia: MyForm está cambiando una entrada no controlada de texto de tipo para controlar. Los elementos de entrada no deben cambiar de no controlado a controlado (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente

Creo que mi entrada está controlada ya que tiene un valor. Me pregunto qué estoy haciendo mal.

Estoy usando React 15.1.0

Creo que mi entrada está controlada ya que tiene un valor.

Para que una entrada sea controlada, su valor debe corresponder al de una variable de estado.

Esa condición no se cumple inicialmente en su ejemplo porque this.state.nameno se establece inicialmente. Por lo tanto, la entrada inicialmente no está controlada. Una vez que onChangese activa el controlador por primera vez, this.state.namese establece. En ese punto, se cumple la condición anterior y se considera que la entrada está controlada. Esta transición de no controlado a controlado produce el error visto anteriormente.

Inicializando this.state.nameen el constructor:

p.ej

this.state = { name: '' };

la entrada se controlará desde el principio, solucionando el problema. Ver Reaccionar componentes controlados para más ejemplos.

Sin relación con este error, solo debe tener una exportación predeterminada. Su código anterior tiene dos.

Cuando renderiza su componente por primera vez, this.state.nameno está configurado, por lo que se evalúa en undefinedo null, y termina pasando value={undefined}o value={null}a su input.

Cuando los cheques ReactDOM a ver si un campo se controla, comprueba para ver sivalue != null (nota que es !=, no !==), y puesto que undefined == nullen JavaScript, se decide que no se la controla.

Entonces, cuando onFieldChange()se llama, this.state.namese establece en un valor de cadena, su entrada pasa de no ser controlada a ser controlada.

Si lo hace this.state = {name: ''}en su constructor, porque '' != nullsu entrada tendrá un valor todo el tiempo, y ese mensaje desaparecerá.

Otro enfoque podría ser establecer el valor predeterminado dentro de su entrada, como este:

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

Sé que otros ya han respondido esto. Pero un factor muy importante aquí que puede ayudar a otras personas que experimentan un problema similar:

Debe tener un onChangecontrolador agregado en su campo de entrada (por ejemplo, textField, casilla de verificación, radio, etc.). Maneje siempre la actividad a través del onChangecontrolador.

Ejemplo:

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

Cuando trabaje con la casilla de verificación, es posible que deba controlar su checkedestado !!.

Ejemplo:

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

Referencia: https://github.com/facebook/react/issues/6779#issuecomment-326314716

La solución simple para resolver este problema es establecer un valor vacío por defecto:

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

Una posible desventaja de establecer el valor del campo en "" (cadena vacía) en el constructor es si el campo es un campo opcional y se deja sin editar. A menos que haga un poco de masaje antes de publicar su formulario, el campo se mantendrá en su almacenamiento de datos como una cadena vacía en lugar de NULL.

Esta alternativa evitará cadenas vacías:

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

... 

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

Cuando use onChange={this.onFieldChange('name').bind(this)}en su entrada, debe declarar su cadena vacía de estado como un valor del campo de propiedad.

forma incorrecta:

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

forma correcta:

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

En mi caso, me faltaba algo realmente trivial.

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

Mi estado era el siguiente cuando recibí la advertencia:

state = {
   myObject: undefined
}

Al alternar mi estado para hacer referencia a la entrada de mi valor , mi problema se resolvió:

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

Si los accesorios de su componente se pasaron como un estado, coloque un valor predeterminado para sus etiquetas de entrada

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

Establezca un valor para la propiedad 'nombre' en el estado inicial.

this.state={ name:''};

Una actualización para esto. Para usar React Hooksconst [name, setName] = useState(" ")

Esto generalmente ocurre solo cuando no está controlando el valor del archivo cuando se inició la aplicación y después de que algún evento o alguna función se activó o el estado cambió, ahora está tratando de controlar el valor en el campo de entrada.

Esta transición de no tener control sobre la entrada y luego tener control sobre ella es lo que hace que el problema ocurra en primer lugar.

La mejor manera de evitar esto es declarando algún valor para la entrada en el constructor del componente. Para que el elemento de entrada tenga valor desde el inicio de la aplicación.

Para establecer dinámicamente propiedades de estado para entradas de formulario y mantenerlas controladas, puede hacer algo como esto:

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>    
  }
}

Simplemente cree un respaldo a '' si this.state.name es nulo.

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

Esto también funciona con las variables useState.