How to trigger INPUT FILE event REACTJS by another DOM

You don't need jQuery for this. You don't even need an event handler. HTML has a specific element for this, called label.

First, make sure your input element has an id attribute:

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

Then, instead of:

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

Try:

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

(Instead of adding htmlFor and id attributes, another solution is to make the input element a child of the label.)

Now clicking the label should trigger the same behaviour as clicking the input itself.

Update: Sep 18, 2021

Note: On NextJS, I was facing onChange event is not trigged from input file element. For that, we can use onInputCapture or onChangeCapture. For more detailed information, Stackoverflow - onChange event is not firing

Basic example on onChangeCapture as per our requirement. Requires React ^16.8,

const Dummy = () => {
  const inputFileRef = React.useRef();
  const onFileChangeCapture = ( e: React.ChangeEvent<HTMLInputElement> ) {
    /*Selected files data can be collected here.*/
    console.log(e.target.files);
  };
  const onBtnClick = () => {
    /*Collecting node-element and performing click*/
    inputFileRef.current.click();
  };
  return (
    <form>
      <input
        type="file"
        ref={inputFileRef}
        onChangeCapture={onFileChangeCapture}
      />
      <button onClick={onBtnClick}>Select file</button>
    </form>
  );
};

Using useRef Hook in functional components. Requires React ^16.8,

const Dummy = () => {
  const inputFileRef = useRef( null );

  const onFilechange = ( e ) => {
    /*Selected files data can be collected here.*/
    console.log( e.target.files );
  }
  const onBtnClick = () => {
    /*Collecting node-element and performing click*/
    inputFileRef.current.click();
  }

  return (
    <form className="some-container">
      <input
        type="file"
        ref={inputFileRef}
        onChange={onFileChange}
      />
      <button onClick={onBtnClick}>Select file</button>
    </form>
  )
}

Class Implementation with React.createRef() and handling click with node element.

class Dummy extends React.Component {
    
  constructor( props ) {
    super( props );

    this.inputFileRef = React.createRef();
    this.onFileChange = this.handleFileChange.bind( this );
    this.onBtnClick = this.handleBtnClick.bind( this );
  }

  handleFileChange( e ) {
    /*Selected files data can be collected here.*/
    console.log( e.target.files );
  }

  handleBtnClick() {
    /*Collecting node-element and performing click*/
    this.inputFileRef.current.click();
  }

  render() {
    return (
      <form className="some-container">
        <input
          type="file"
          ref={this.inputFileRef}
          onChange={this.onFileChange}
        />
        <button onClick={this.onBtnClick}>Select file</button>
      </form>
    )
  }
}

Using Hooks with useref:

import React, {useRef} from 'react';
const FancyInput = () => {
    const fileInput = useRef(null)

    const handleClick = () => {
        fileInput.current.click()
    }

    const handleFileChange = event => {
        console.log("Make something")
    }

    return(
        <div className="patientactions-container">
            <input
                type="file"
                onChange={(e) => handleFileChange(e)}
                ref={fileInput} 
            />
            <div onClick={() => handleClick()}></div>
        </div>
    )
}
export default FancyInput;

You could trigger the input type file with ref, f.e:

on your class component:

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

and make a function on that class component too:

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