Tepki - kontrolsüz bir girişi değiştirme

Ben bir kontrollü girdi olduğuna inanıyorum formu ile basit bir tepki bileşeni var:

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;

Uygulamamı çalıştırdığımda aşağıdaki uyarıyı alıyorum:

Uyarı: MyForm, kontrol edilecek tip metinlerin kontrolsüz bir girişini değiştiriyor. Giriş elemanları kontrolsüzden kontrollü (veya tam tersi) olmamalıdır. Bileşenin ömrü boyunca kontrollü veya kontrolsüz giriş öğesi kullanma arasında karar verme

İnanıyorum ki girdim kontrol ediliyor çünkü bir değeri var. Neyi yanlış yaptığımı merak ediyorum?

React 15.1.0 kullanıyorum

İnanıyorum ki girdim kontrol ediliyor çünkü bir değeri var.

Bir girişin kontrol edilebilmesi için değeri bir durum değişkeninin değerine karşılık gelmelidir.

this.state.nameBaşlangıçta ayarlanmadığından, bu koşul başlangıçta örneğinizde karşılanmaz . Bu nedenle, girdi başlangıçta kontrolsüzdür. Bir kez onChangeişleyicisi ilk kez tetiklenir, this.state.nameset alır. Bu noktada, yukarıdaki koşul yerine getirilir ve girdinin kontrol edildiği kabul edilir. Kontrolsüzden kontrol edilene bu geçiş, yukarıda görülen hatayı üretir.

Yapıcıda başlatarak this.state.name:

Örneğin

this.state = { name: '' };

giriş, sorunu düzelterek baştan kontrol edilir. Daha fazla örnek için Reaksiyon Kontrollü Bileşenlere bakın .

Bu hatayla alakasız, yalnızca bir varsayılan dışa aktarmanız gerekir. Yukarıdaki kodunuzda iki tane vardır.

Öncelikle bileşeni işlediğinizde this.state.nameo kadar değerlendirir, böylece ayarlı değil undefinedya nullve geçen sonunda value={undefined}veya value={null}To Your input.

Bir alan kontrol edilir, eğer ReactDOM denetler zaman o çekleri görmek içinvalue != null (o olduğunu not !=değil !==), ve o zamandan beri undefined == nullJavaScript, buna kontrolsüz olduğunu karar verir.

Bu nedenle, onFieldChange()çağrıldığında, this.state.namebir dize değerine ayarlandığında, girişiniz kontrolsüz olmaktan kontrol edilmeye gider.

Yapıcıda yaparsanız this.state = {name: ''}, çünkü '' != nullgirdiniz her zaman bir değere sahip olacak ve bu mesaj kaybolacaktır.

Başka bir yaklaşım, girişinizin içindeki varsayılan değeri ayarlamak olabilir, örneğin:

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

Başkalarının bunu zaten yanıtladığını biliyorum. Ancak burada benzer sorun yaşayan diğer insanlara yardımcı olabilecek çok önemli bir faktör:

onChangeGiriş alanınıza bir işleyici eklenmelidir (örn. TextField, onay kutusu, radyo vb.). Etkinliği her zaman onChangeişleyici aracılığıyla gerçekleştirin .

Misal:

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

Onay kutusuyla çalışırken checkeddurumunu ele almanız gerekebilir !!.

Misal:

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

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

Bu sorunu çözmek için basit bir çözüm, varsayılan olarak boş bir değer belirlemektir:

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

Alan değerini yapıcıda "" (boş dize) olarak ayarlamanın olası bir dezavantajı, alanın isteğe bağlı bir alan olması ve düzenlenmemiş olarak bırakılmasıdır. Formunuzu göndermeden önce biraz masaj yapmadığınız sürece, alan veri depolama alanınıza NULL yerine boş bir dize olarak kalır.

Bu alternatif boş dizeleri önleyecektir:

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

... 

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

Girişinizde kullandığınızda onChange={this.onFieldChange('name').bind(this)}, durum boş dizenizi özellik alanının değeri olarak bildirmeniz gerekir.

yanlış yol:

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

doğru yol:

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

Benim durumumda, gerçekten önemsiz bir şey eksikti.

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

Uyarıyı alırken durumum şu şekildeydi:

state = {
   myObject: undefined
}

Durumumu, değerimin girdisine referans gösterecek şekilde değiştirerek , sorunum çözüldü:

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

Bileşeninizdeki sahne öğeleri durum olarak iletildiyse, giriş etiketleriniz için varsayılan bir değer koyun

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

Başlangıç ​​durumunda 'name' özelliğine bir değer ayarlayın.

this.state={ name:''};

Bunun için bir güncelleme. Reaksiyon Kancaları kullanımı içinconst [name, setName] = useState(" ")

Bu genellikle yalnızca uygulama başlatıldığında dosyalanan değeri kontrol etmediğinizde ve bir olay ya da bir işlev tetiklendikten ya da durum değiştikten sonra artık giriş alanındaki değeri kontrol etmeye çalışıyorsunuz.

Girdi üzerinde kontrol sahibi olmama ve daha sonra kontrol üzerinde bulunmama geçişi, sorunun ilk etapta gerçekleşmesine neden olan şeydir.

Bundan kaçınmanın en iyi yolu, bileşenin yapıcısındaki girdi için bir değer bildirmektir. Böylece giriş elemanı uygulamanın başlangıcından itibaren bir değere sahip olur.

Form girişleri için durum özelliklerini dinamik olarak ayarlamak ve bunları kontrol altında tutmak için şöyle bir şey yapabilirsiniz:

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

This.state.name boşsa '' için bir yedek oluşturun.

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

Bu, useState değişkenleriyle de çalışır.