Q:

onChange() is not a function.  Trigger onChange() manually

I've got a file selector, when clicking the button, the file selector shows up:
<input id='example' type="file" accept="image/*" onChange={this.onImageChange} />

Now I want to use another button to do that, trigger the input above :
<button onClick={() => {
    var element = document.getElementById('example');

    console.log(element) // This shows <input id="example" type="file" accept="image/*">

    // element.onChange() // Error: onChange() is not a function

    // Above doesn't work, so I try to trigger the onChange event manually,
    // but below doesn't do anything
    var event = new Event('change');
    element.dispatchEvent(event);
}}></button>

A:

If that is react you should not access the Dom for those kind of stuff.  They have one Api to give you what you need. 
You want one uncontroller component.  In order to do that you can use one reference. 
I havent tried but i think you can do this. 
Create the ref on the constructor
this.inputRef = React.createRef();

Then assign the input ref prop to this.inputRef 
<input ref={this.inputRef} id='example' type="file" accept="image/*" onChange={this.onImageChange} />

And lately dispatch the click. 
this.inputRef.current.click();

Hope it works

