クライアント側のブラウザコンソールから手動でコンポーネントイベントを呼び出す

Question

私のWebサイトでは、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 
      } 

私はクライアントのChromeブラウザのコンソールとそのが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