4

I'm working on a component which won't have any input/select element but I want it to behave like one, dispatching the same events a React input does, expecting to have something like this working:

<div onChange={this.onChange}>
    <MyComponent/>
    <input type="text"/>
</div>

In that example, both, input and MyComponent should reach the this.onChange listener.

I know how to dispatch real DOM events, but that's not making it to the onChange listener, only to a real addEventListener on the DOM:

var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);

this.getDOMNode().dispatchEvent(event);

Maybe the answer is here (or here?), but I'm still struggling with this.

UPDATE

Thanks to @limelights for preparing a playground:

http://jsfiddle.net/coma/a8wgh5wk/1/

coma
  • 16,429
  • 4
  • 51
  • 76
  • Possible duplicate of [Why React event handler is not called on dispatchEvent?](https://stackoverflow.com/questions/39065010/why-react-event-handler-is-not-called-on-dispatchevent) – rofrol Jul 27 '17 at 17:13
  • look at my answer https://stackoverflow.com/questions/39065010/why-react-event-handler-is-not-called-on-dispatchevent/45356934#45356934 – rofrol Jul 27 '17 at 17:14

1 Answers1

0

The onChange event through React is only available for form controls which means that you'll never get them to register as a handler on a DIV tag.

Henrik Andersson
  • 45,354
  • 16
  • 98
  • 92