클라이언트 측 브라우저 콘솔에서 구성 요소 이벤트를 수동으로 실행합니다.

Question

내 웹 사이트에서 React J 및 해당 편집 가능 항목을 사용하여 div 요소를 만들었습니다. 사용자가 내용을 편집하면 onInput 함수가 트리거됩니다.

r.createElement("div", { 
       dangerouslySetInnerHTML: { 
        __html: e 
       }, 
       dir: "auto", 
       ref: "input", 
       spellCheck: this.props.spellCheck, 
       "data-tab": this.props.editable ? 1 : null , 
       contentEditable: this.props.editable, 
       className: t, 
       onInput: this.onInput, 
       onPaste: this.onPaste, 
       onCut: this.onCut, 
       onKeyUp: this.onKeyUp, 
       onKeyPress: this.onKeyPress, 
       onMouseDown: this.onMouseDown, 
       onContextMenu: this.onContextMenu, 
       onFocus: this.props.onFocus, 
       onBlur: this.props.onBlur 
      } 

나는 클라이언트 크롬 브라우저 콘솔과는 onInput 이벤트를 트리거하지에서 해당 요소에 대한 내용을 설정하려합니다.
내 질문에 동적으로 입력 을 추가하는 방법입니다. 및 요소에 대해 호출 된 onInput 이벤트을 호출합니다.

Answer 1

당신은 querySelector을 통해 콘솔에서

1.find DOM 노드를 이벤트를 전달 .. 또는 "요소"탭을 선택 요소 $ 0 사용할 수 있습니다;

const input = document.querySelector('[contentEditable]'); 

2.create 이벤트

const eventX = new Event('input', {bubbles: true}); 

3.change 값

input.textContent = "TEST"; 

4.dispatch 이벤트

input.dispatchEvent(eventX) 

jsfiddle DEMO test