从客户端浏览器控制台手动响应组件事件触发

Question

In my website I have created a div element using React Js and its editable also. If user edit the content it will trigger onInput function.

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
            }

I am trying to set content to that element from client chrome browser console and its not triggering the onInput event.
My question is there a way to add input dynamically and call onInput event which is attached for the element.

Answer 1

you can dispatch event from console

1.find dom node through querySelector.. , or select element in "Elements" tab and use $0;

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

2.create event

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

3.change value

input.textContent = "TEST";

4.dispatch event

input.dispatchEvent(eventX)

jsfiddle DEMO test