admin 管理员组

文章数量: 1086019

In my website, I have created a div element using React Js and it's editable, here if the user edits the content it will trigger the 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 the content to that element from the client chrome browser console and it's not triggering the onInput event.

Is there a way to add input dynamically and call onInput event which is attached for the element?


In my website, I have created a div element using React Js and it's editable, here if the user edits the content it will trigger the 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 the content to that element from the client chrome browser console and it's not triggering the onInput event.

Is there a way to add input dynamically and call onInput event which is attached for the element?

  • javascript
  • jquery
  • reactjs
  • dom-events
  • google-chrome-devtools
Share Improve this question edited Sep 13, 2021 at 4:20 Suresh Pattu asked Aug 1, 2016 at 9:12 Suresh PattuSuresh Pattu 6,22918 gold badges62 silver badges93 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 11

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

本文标签： javascriptReact component event fire manually from client side browser consoleStack Overflow

版权声明：本文标题：javascript - React component event fire manually from client side browser console - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744039639a2523017.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。