React.js設置輸入值

我是react.js的初學者，它很驚人，但我面臨着一個真正的問題：我需要使用普通和純粹的javascript設置輸入的值，但形成一些原因react.js沒有按預期工作。以此爲例：打開此URL http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq React.js設置輸入值

您將看到有一個「電子郵件」輸入字段，其ID爲「CntctFrm2emailField」。我嘗試使用JavaScript與此代碼來改變它的價值：

document.getElementById("CntctFrm2emailField").value = "[email protected]";

但出於某種原因，如果你嘗試發送形式React.js沒有更新其核心原因這個值（單擊發送按鈕）您將看到它將顯示一條錯誤消息，指出該電子郵件未正確填寫。但是，一旦我點擊電子郵件字段內，並鍵入任何字母，然後單擊發送按鈕它工作正常，我的意思是，React.js看到新的價值。

那麼如何更改輸入值並讓React.js更新該值呢？

來源

2015-06-06 Sitepor500.com.br

如果您不能在其他評論中提及您的代碼，恐怕您的問題不適合本網站，我建議您將其刪除。 –

你應該張貼您的代碼，以獲得更好/更以你的情況適合的答案，但一所想，會的工作僅僅是設置輸入的

defaultValue

，而不是value。看看你的瀏覽器控制檯，這就是反應會記錄在那裏。

根據您的代碼，你可以設置statesvalueonKeyUp或具有類似的功能或表單提交時獲取新的輸入值。

來源

2015-06-06 14:02:41 baao

謝謝@michael。對不起，沒有發佈代碼，但我不是誰做了那個網站，我只是添加了一些功能，代碼是一團糟。但看，我試過你的建議，它不起作用 - > document.getElementById（「CntctFrm2emailField」）。defaultValue =「[email protected]」; 。我認爲我需要出於某種原因觸發該輸入的onchange事件，因爲我認爲react.js正在偵聽onchange事件以更新內部值。我已經嘗試用js觸發onchange（）事件，但它不起作用。也許有一些方法可以通過反應觸發變化事件？ –

謝謝！沒有意識到這個道具存在。 –

這是你的問題的關鍵，

但出於某種原因React.js沒有更新

主要的原因是，「影子之內作出反應的作品在其核心這個值dom'和你的

document.getElementById("CntctFrm2emailField").value = "[email protected]";

Inst以任何方式更新反應值只是窗口dom對象。

React內置了更新輸入值的函數。嘗試這種方式。

檢查此頁面，瞭解反應形式的詳細信息： https://facebook.github.io/react/docs/forms.html#controlled-components

來源

2015-06-06 14:02:50 jmingov

謝謝你解釋說，確實有一個「虛擬的dom」有反應，而這正是它如此之快。但我認爲我需要的是在該輸入中發起更改事件。我已經嘗試過使用純javascript的.onchange（），但它不起作用。我想我需要用react.js來解僱它。你能幫我解決這個問題嗎？我無法相信這是很難更新輸入值使用react.js –

如果你想幫助我需要看到的代碼...但是，看着網站，整個形式是一個反應組件，稱爲「ContactForm」和輸入事件也通過反應來處理（'onclick && onchange'）。你使用js還是jsx？ – jmingov

我很想向你展示代碼，但我不知道這種形式是如何編程的，因爲我今天第一次聽說react.js。我甚至沒有在電子郵件輸入框中看到

我已經寫了，利用此功能來觸發的變化狀態的領域：

function doEvent(obj, event) { 
    /* Created by [email protected] */ 
    var event = new Event(event, {target: obj, bubbles: true}); 
    return obj ? obj.dispatchEvent(event) : false; 
}

使用方法如下：

var el = document.getElementById("CntctFrm2emailField"); 
el.value = "[email protected]"; 
doEvent(el, 'input');

來源

2016-11-11 14:17:29

我有一個表單，我需要提交一些監控。我這樣做是這樣的：

$("input[type=email]").value = "[email protected]" 
$("input[type=email]").defaultValue = "[email protected]" 
$("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()

注意，對於網站，我登錄，我不得不同時設置值和默認值。有一些額外的驗證邏輯綁定到輸入。值

來源

2017-01-19 20:34:33

React.js設置輸入值

回答

相關問題