<p dir="auto">Right now you can only dispatch native events to the DOM nodes, but there's not any way to dispatch synthetic events on the Virtual DOM nodes.</p>
<p dir="auto">I'd like to be able to dispatch synthetic events, in addition, I'd like a way to define custom event listeners.</p>
<h2 dir="auto">Usecase</h2>
<p dir="auto">For example, I've a component decorator that adds a <code class="notranslate">resize</code> event on a DOM element when it get resized. I'd like to be able to dispatch the <code class="notranslate">resize</code> event to such element and be able to listen to it using <code class="notranslate">onResize</code>.</p>
<p dir="auto">Example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function DecoratedComponent(props) {
  return &lt;div onResize={evt =&gt; console.log('resized')}&gt;foobar&lt;/div&gt;;
}
resizeAware(DecoratedComponent);"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-v">DecoratedComponent</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onResize</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">evt</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'resized'</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>foobar<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-en">resizeAware</span><span class="pl-kos">(</span><span class="pl-v">DecoratedComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">For reference, this is the logic of my decorator that would dispatch the event.<br>
<a href="https://gist.github.com/FezVrasta/0324991bbdf044fd2723eebbc344adff">https://gist.github.com/FezVrasta/0324991bbdf044fd2723eebbc344adff</a></p>
<p dir="auto">As you see, right now I'm using <code class="notranslate">findDOMNode(this.componentNode).dispatchEvent(new Event('resize'))</code> which makes the <code class="notranslate">resize</code> event available only to the real DOM node.<br>
This means that I must listen for the event in this way:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class DecoratedComponent extends React.Component {
  componentDidMount() {
    findDOMNode(this).addEventListener('resize', evt =&gt; console.log('resized'));
  }
  render() {
    return &lt;div&gt;foobar&lt;/div&gt;;
  }
}
resizeAware(DecoratedComponent);"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">DecoratedComponent</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">componentDidMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">findDOMNode</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">'resize'</span><span class="pl-kos">,</span> <span class="pl-s1">evt</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'resized'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>foobar<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-en">resizeAware</span><span class="pl-kos">(</span><span class="pl-v">DecoratedComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This is very inconvenient and not flexible. We'd need a way to dispatch synthetic events and be able to listen to them using the <code class="notranslate">onSomething</code> properties.</p>
<p dir="auto">I think it would be a great addition to React.</p>
<p dir="auto">From Twitter: <a href="https://twitter.com/Vjeux/status/569985084524081153" rel="nofollow">https://twitter.com/Vjeux/status/569985084524081153</a></p>
<p dir="auto">When using PhantomJS for testing browser interaction, often times what seems to happen is that values get changed directly on the DOM elements and then the 'change' event is triggered on the element. Because of this, interacting with ReactJS elements through PhantomJS and through jQuery doesn't work for some interactive elements like <code class="notranslate">&lt;input&gt;</code> and <code class="notranslate">&lt;select&gt;</code>.</p>
<p dir="auto">Of course, the easiest solution is to take the real elements that are mounted and attach event listeners to them like <code class="notranslate">$(this.MyRef.getDOMNode()).on(EVENT, CALLBACK)</code>, but it isn't the most pleasant experience.</p>
<p dir="auto">Is there any interest in mirroring events on the real nodes to the synthetic events, or is this situation normal? I'd like to be able to interact with my application through PhantomJS, but this seems to be quite the blocker when interacting with input and select elements.</p>
<p dir="auto">JSBin example here: <a href="http://jsbin.com/xawogo/3/edit" rel="nofollow">http://jsbin.com/xawogo/3/edit</a></p>