React组件事件从客户端浏览器控制台手动启动

Question

在我的网站中，我创建了一个使用React Js和其可编辑的div元素。如果用户编辑内容，它将触发输入功能。

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

你可以从控制台

1.find DOM节点通过querySelector调度事件......，或“元素”选项卡中选择元素，并使用$ 0;

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

2.创建事件

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

3.change值

input.textContent = "TEST"; 

4.dispatch事件

input.dispatchEvent(eventX) 

jsfiddle DEMO test