React.js ayar değeri giriş değeri

Question

Ben rea.js ile yeni başlayan biriyim ve bu harika bir problemle karşı karşıyayım: Düz ve saf javascript kullanarak bir girdinin değerini ayarlamalıyım ama bazı sebepleri olan beklendiği gibi çalışmıyor. Bu örneği al: Bu URL'yi aç http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

"CntctFrm2emailField" kimliğinin "Email" giriş alanı olduğunu göreceksiniz. (GÖNDER düğmesini tıklamak)

document.getElementById("CntctFrm2emailField").value = "testing@gmail.com"; 

Ama formu göndermek çalışırsanız nedense React.js çekirdek nedenine bu değerinin güncellenmesi değildir: Bu kod ile javascript kullanarak ona değerini değiştirmeye çalıştığınızda e-postanın doğru şekilde doldurulmadığını belirten bir hata mesajı göreceğini göreceksiniz. AMA, e-posta alanının içine tıklayıp herhangi bir harfi yazıp SEND düğmesini tıkladıktan sonra iyi çalışır, yani, React.js yeni değeri görür.

Peki bir giriş değerini nasıl değiştirebilirim ve bu değeri de güncellemek için React.js'yi kullanabilir miyim?

Answer 1

Daha iyi/durumunuza daha uygun cevap almak için kodunuzu gönderilmesi gerekiyor, ancak çalışacak bir düşünce sadece girdinin

defaultValue 

yerine value ayarlıyor. Tarayıcınızın konsoluna bir göz atın.

Kodunuzdaki bağlı olarak, bir işlevle statesvalueonKeyUp veya benzeri ayarlamak veya form gönderildiğinde yeni girişler değeri getirebilir. Bu söz konusu anahtarıdır

Answer 2

,

Ama nedense React.js ana nedeni bir 'gölge içinde çalışmalarını tepki olduğunu

Özünde bu değerinin güncellenmesi değildir

dom 've

document.getElementById("CntctFrm2emailField").value = "testing@gmail.com"; 

Herhangi bir şekilde tepkilerin değerini güncellemek için sadece pencere dom nesnesi.

React, girdinin değerini güncellemek için işlevler oluşturdu. Bu şekilde dene.

Kontrol formları tepki hakkında daha fazla bilgi için bu sayfayı: https://facebook.github.io/react/docs/forms.html#controlled-components

Answer 3

yazdım ve alan için değişiklik durumunu tetiklemek için bu işlevi kullanın:

function doEvent(obj, event) { 
    /* Created by David@Refoua.me */ 
    var event = new Event(event, {target: obj, bubbles: true}); 
    return obj ? obj.dispatchEvent(event) : false; 
} 

böyle kullanın:

var el = document.getElementById("CntctFrm2emailField"); 
el.value = "testing@gmail.com"; 
doEvent(el, 'input'); 

Answer 4

Bazı izleme için göndermem gereken bir formum vardı. Böyle yaptım: Web sitesi için ben değeri ve defaultValue hem ayarlamak zorunda giriş olduğunu

$("input[type=email]").value = "me@something.com" 
$("input[type=email]").defaultValue = "me@something.com" 
$("input[type=password]").value = "mystellarpassword" 
$("input[type=password]").defaultValue = "pinpmystellarpasswordss" 
$("input[type=email]").dispatchEvent(new Event('input', {target: $("input[type=email]"), bubbles: true})); 
$("input[type=password]").dispatchEvent(new Event('input', {target: $("input[type=password]"), bubbles: true})); 
$("button.login").click() 

Not. Girişe bağlı bazı ekstra doğrulama mantığı vardı.değer