Advertencia: un componente está cambiando una entrada no controlada de tipo texto para ser controlado. Los elementos de entrada no deben cambiar de no controlados a controlados (o viceversa). Decida entre usar un elemento de entrada controlado o no controlado durante la vida útil del componente.*
El siguiente es mi código:
constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({fields}); } .... render() { return( <div className="form-group"> <input value={this.state.fields["name"]} onChange={this.onChange.bind(this, "name")} className="form-control" type="text" refs="name" placeholder="Name *" /> <span style={{color: "red"}}>{this.state.errors["name"]}</span> </div> ) }La razón es, en el estado que definiste:
this.state = { fields: {} } campos como un objeto en blanco, por lo que durante la primera representación this.state.fields.name será undefined y el campo de entrada obtendrá su valor como:
value={undefined}Debido a eso, el campo de entrada se volverá incontrolable.
Una vez que ingresa cualquier valor en la entrada, los fields en el estado se cambian a:
this.state = { fields: {name: 'xyz'} }Y en ese momento el campo de entrada se convierte en un componente controlado; por eso te sale el error:
Un componente está cambiando una entrada no controlada de tipo texto para ser controlado.
Soluciones posibles:
1- Definir los fields en estado como:
this.state = { fields: {name: ''} }2- O defina la propiedad de valor usando una evaluación de cortocircuito como esta:
value={this.state.fields.name || ''} // (undefined || '') = ''Cambiar el value a defaultValue lo resolverá.
Nota :
defaultValuees solo para la carga inicial. Si desea inicializar lainput, debe usardefaultValue, pero si desea usarstatepara cambiar el valor, debe usarvalue. Lea esto para más.
value={this.state.input ||""} en input para deshacerme de esa advertencia.
Dentro del componente coloque el cuadro de entrada de la siguiente manera.
<input className="class-name" type= "text" id="id-123" value={ this.state.value || "" } name="field-name" placeholder="Enter Name" />