React.js 設置輸入值

Question

我是 react.js 的初學者，這很了不起，但我面臨一個真正的問題：我需要使用普通和純 javascript 設置輸入的值，但出於某種原因，react.js 無法按預期工作。 舉個例子：打開這個網址http://autoescolalatorreta.wix.com/latorreta#!contact/c24vq

您將看到有一個“電子郵件”輸入字段，其 ID 為“CntctFrm2emailField”。 我嘗試使用帶有以下代碼的 javascript 更改它的值：

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

但是由於某種原因，React.js 沒有在其核心原因上更新此值，如果您嘗試發送表單（單擊“發送”按鈕），您將看到它將顯示一條錯誤消息，指出電子郵件未正確填寫。 但是，一旦我在電子郵件字段內單擊並輸入任何字母並單擊“發送”按鈕，它就可以正常工作，我的意思是，React.js 會看到新值。

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

Answer 1

對於上面的 React 16，解決方案不起作用。 從 GitHub 檢查此問題。

function setNativeValue(element, value) {
    let lastValue = element.value;
    element.value = value;
    let event = new Event("input", { target: element, bubbles: true });
    // React 15
    event.simulated = true;
    // React 16
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    element.dispatchEvent(event);
}

var input = document.getElementById("ID OF ELEMENT");
setNativeValue(input, "VALUE YOU WANT TO SET");

Answer 2

我已經編寫並使用此函數來觸發字段的更改狀態：

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

像這樣使用它：

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

Answer 3

您應該發布您的代碼以獲得更好/更適合您情況的答案，但有人認為這只是設置

defaultValue

而不是輸入的value 。 看看你的瀏覽器控制台，這就是 react 會在那里記錄的內容。

根據您的代碼，您可以使用函數設置onKeyUp或類似的states value或者在提交表單時獲取新的輸入值。

Answer 4

我有一個表格需要提交以進行一些監控。 我是這樣做的：

$("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()

請注意，對於我登錄的網站，我必須同時設置 value 和 defaultValue。 有一些額外的驗證邏輯綁定到 input.value

Answer 5

首先，你永遠不應該在 React.js 中使用“文檔”對象。 這是一個很大的不。 你也不應該訪問 DOM 元素，但是如果你知道你在做什么（比如動畫），你應該創建 "ref" 對象，這與主題無關，以訪問 DOM 元素。

首先，您應該在表單的狀態對象內有一個對象。 假設您的表單中有“用戶名”和“密碼”字段。

state={form:{username:"","password:""}

因為輸入字段有自己的狀態，所以我們在那里輸入的任何內容都將存儲在輸入字段中。 我們應該擺脫輸入字段的狀態，只依賴狀態對象。 我們希望擁有單一的事實來源，因此將“輸入”轉換為“受控元素”。 受控元素沒有自己的狀態，它們通過 props 獲取所有數據，並通過引發事件通知數據的更改。 我們正在使用“value”道具來設置輸入值。 由於輸入字段被初始化為空字符串，我們將無法在輸入字段中輸入內容。 解決方案是我們必須動態處理輸入字段的更改事件。

handleChange=e=>{
    const form={...this.state.form}
    form[e.currentTarget.name]=e.currentTarget.value
    this.setState({account})}

<input value={this.state.form.username} change={this.handleChange} name="username"/>
<input value={this.state.form.password} change={this.handleChange} name="password" />

Answer 6

這是你問題的關鍵，

但出於某種原因，React.js 並沒有在其核心更新這個值

主要原因是 react 在“shadow dom”中起作用，而您的

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

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

React 內置了更新輸入值的函數。 試試那個方法。

查看此頁面以獲取有關反應表單的更多信息： https : //facebook.github.io/react/docs/forms.html#controlled-components

Answer 7

如果輸入不是 html 形式，那么你應該這樣做：

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

這應該工作