javascript - change - title css

Reaccionar: cambiar una entrada no controlada

Question

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

Answer 1

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.name no se establece inicialmente. Por lo tanto, la entrada inicialmente no está controlada. Una vez que se onChange controlador onChange por primera vez, se establece this.state.name . 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.

Al inicializar this.state.name en 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.

Answer 2

Cuando renderiza su componente por primera vez, this.state.name no se establece, por lo que se evalúa como undefined y termina pasando el value={undefined} a su input .

Cuando ReactDOM verifica si un campo está controlado, verifica si value != null (tenga en cuenta que es != , !== ), y dado que undefined == null en JavaScript, decide que no está controlado.

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

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

Answer 3

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
    }

Answer 4

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

Answer 5

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

this.state={ name:''''};

Answer 6

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.

Answer 7

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

Answer 8

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

Answer 9

Sé que otros ya han respondido esto. Pero uno de los factores muy importantes aquí que puede ayudar a otras personas que experimentan un problema similar:

Debe tener onChange controlador onChange en su campo de entrada (por ejemplo, textField, checkbox, radio, etc.). Y siempre maneje la actividad a través del controlador onChange , como:

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

y cuando esté trabajando con la casilla de verificación, entonces puede que necesite manejar su estado checked con !! me gusta:

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

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

Answer 10

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

Answer 11

Una actualización para esto. Para React Hooks, use const [name, setName] = useState ("")

Answer 12

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