How to trigger an INPUT FILE REACTJS event on another DOM

Question

I have INPUT BUTTON and INPUT FILE , I want to press BUTTON and it will run INPUT FILE in REACT JS.

React.createElement('input',{type:'file', name:'myfile'})

then the button

React.createElement('a',{onClick: this.doClick},'Select File')

So, how to detect and fire an INPUT FILE click event when pressing A HREF?

Your help is appreciated. :-)

Answer 1

You can achieve this using jQuery:

this.doClick: function() {
    $('input[type=file]').trigger('click');
}

React does not provide specific functions for triggering events; you can use jQuery or just your own Javascript: see Creating and triggering events on MDN

Answer 2

jQuery. . HTML , label.

, input id:

React.createElement('input',{type:'file', name:'myfile', id:'myfile'})

:

React.createElement('a',{onClick: this.doClick},'Select File')

Try:

React.createElement('label',{htmlFor: 'myfile'},'Select File')

( htmlFor id input label.)

label , input.

Answer 3

You can run the input type file with ref, fe:

for your class:

<input 
    ref={fileInput => this.fileInput = fileInput} 
    type="file"
 />
<button onClick={this.triggerInputFile}> Select File </button>

and execute a function on this class:

triggerInputFile = () => this.fileInput.click()