프로그래밍 방식으로 반응 양식 작성

Question

나는 사용자 스크립트를 작성 중이며 reactjs에서 작성한 양식을 채울 수 없습니다. 내 코드 :

document.querySelector("#id-username").value = "name@domain.xx"; 
// Attempt to notify framework using input event 
document.querySelector("#id-username").dispatchEvent(new Event("input", {data:"name@domain.xx"})); 
// 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(); 

이 코드를 페이지로드 후 developper 도구 콘솔에 입력했습니다. 양식이 내 programatical 입력을 무시하지만 :

양식

는 here를 찾을 수 있습니다. 내 작업의 목적은 지정된 웹 사이트에 대한 로그인을 자동화하는 것입니다. 특정 URL을 제공했지만 모든 reactjs 양식에 적용 할 수있는이 문제 (예 : 일부 reactjs API 사용)에 대한 일반적인 해결책을 기대합니다. 다른 사용자는 사이트 자동화 테스트를 작성하는 데이 솔루션이 필요할 수 있습니다.

Answer 1

이벤트를 ReactJS에 emmited하여 값을 등록해야합니다. 특히, 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})); 
} 

Answer 2

크롬 버전 64의 경우 해결 방법이 있습니다. 그렇지 않으면 이벤트가 무시됩니다.

참조 : https://github.com/facebook/react/issues/10135#issuecomment-314441175

(전체 신용 링크에서 fatfisz하는) 그것은 양식 반응 것에 대해 특별한 일이 없어야한다