以編程方式填寫reactjs表格

我正在寫一個userscript，我無法設法填寫reactjs製作的表格。我的代碼：以編程方式填寫reactjs表格

document.querySelector("#id-username").value = "[email protected]"; 
// Attempt to notify framework using input event 
document.querySelector("#id-username").dispatchEvent(new Event("input", {data:"[email protected]"})); 
// Attempt to notify framework using change event 
document.querySelector("#id-username").dispatchEvent(new Event("change")); 
// This doesn't help either 
document.querySelector("#id-username").dispatchEvent(new Event("blur")); 
// Submit the form using button (it's AJAX form) 
document.querySelector("fieldset div.wrap button").click();

我在加載頁面後將此代碼輸入到開發工具控制檯。但是形式我忽略輸入programatical：

image description

的形式，可以發現here。我的工作目的是自動登錄到給定的網站。我提供了特定的URL，但我期望通用的解決方案來解決這個問題（例如，使用一些reactjs API），它可以應用於任何reactjs形式。其他用戶可能需要使用此解決方案來爲其網站編寫自動化測試。

來源

2017-03-14 Tomáš Zato

不應該有什麼特別的地方是一個反應形式。您可能只想等待document.load在嘗試自動化之前觸發。例如，我從控制檯運行你的第一行，並填充用戶名框就好了。 –

只需使用'waitForKeyElements'或'MutationObserver'。 –

@KeithRousseau我在firefox的控制檯中測試了這個（加載後很久）。你看到的結果不是來自userscript，我甚至沒有開始寫它。加載頁面後，我剛剛測試了這些命令，並且它已經失敗。 –

必須將事件提交給ReactJS以使其註冊該值。特別是input事件。確保事件起泡非常重要--React JS在document級別只有一個偵聽器，而不是輸入字段。我製作了以下方法來設置輸入字段元素的值：

function reactJSSetValue(elm, value) { 
    elm.value = value; 
    elm.defaultValue = value; 
    elm.dispatchEvent(new Event("input", {bubbles: true, target: elm, data: value})); 
}

來源

2017-03-15 12:54:42

這正是我所期待的。一個更正：Event中的目標參數需要更改爲elm而不是用戶名。 – funkju

對於Chrome 64版，有一種解決方法。否則，該事件將被忽略。

參見：https://github.com/facebook/react/issues/10135#issuecomment-314441175

（全部信貸中的鏈接fatfisz）

來源

2018-02-20 17:20:09 bschwagg

以編程方式填寫reactjs表格

回答

相關問題