Bir bileşen, denetlenmeyen bir tür giriş metnini ReactJS

Question

'da denetlenmekte olan bir hata olarak değiştiriyor. Bir bileşen, kontrol edilmek üzere kontrol edilmeyen yazı tipi girdisini değiştiriyor. Giriş elemanları kontrolsüzden kontrole geçmemelidir (veya tersi). Bileşenin kullanım ömrü boyunca kontrollü veya kontrolsüz bir giriş elemanı kullanmak arasında karar verin.

Benim Kod:

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}); 
     } 
    ... 
    <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> 

Answer 1

Nedeni ise, tanımladığınız halde:

this.state = { fields: {} } 

alanlar boş nesne ilk this.state.fields.name oluşturma sırasında undefined olacak ve giriş alanı değerini olarak alacak, böylece:

value={undefined} 

Bu girdi alanı nedeniyle ncontrolled. Girilecek içinde herhangi bir değer girdikten sonra

, devlet fields için değişti:

A component is changing an uncontrolled input of type text to be controlled.

:

this.state = { fields: {name: 'xyz'} } 

Ve bu sefer girdi alanına

kontrollü bileşenine dönüştürülür, bu hatayı alıyorsanız yüzden

Olası Çözümleri:

1- fields içinde tanımlayın durum olarak:

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

2- ya da böyle Short-circuit evaluation kullanarak değer özellik tanımlamak:

value={this.state.fields.name || ''} // (undefined || '') = ''