如何在 reactjs 中使用“document.getElementById('file').click()”

Question

I searched for a below javascript code and I want to use it in Reactjs:

    <input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file"/>

In order to use it in Reactjs, I changed it to:

    <input type="button" id="loadFileXml" value="loadXml" onClick={document.getElementById('file').click()} />
    <input type="file" style="display:none;" id="file" name="file"/>

But I got error message Cannot read property 'click' of null . Could somebody help me figure out how to write the write code for that.

Thanks so much.

Answer 1

You can't use react js in this way. First, you can use a state for the display property. Suppose there is a class component. I wrote it with my hand, it could be a typo.

import React, {Component} from 'react';

class Example extends Component {
 state = {
  isVisible : true ; 
} 

  changeVisible = () => {

    this.setState({

       isVisible : !this.state.isVisible // this working like a toggle button 
    })

   }

render (){
    return(
   <div>
        <button onClick = {this.changeVisible}> Change Visible </button>
        {
           //This section may be the item that you want to be visible or not
           isVisible ? <h1>I am Visible </h1> : null

        }
   </div>

)
}


} 
  export default Example;

Answer 2

Disclaimer: I personally don't think you should be hiding the file input control and delegating the click to another element.

That said, the way to do this with React is to get a reference to the file input element using the ref property and React.createRef method:

Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

Demo:

 class MyComponent extends React.Component { constructor(props) { super(props); this.fileRef = React.createRef(); } handleClick = () => { const fileElem = this.fileRef.current; if (fileElem) { fileElem.click(); } } render() { return ( <div> <button onClick={this.handleClick}>button</button> <input ref={this.fileRef} type="file" style={{display: 'none'}} name="file" /> </div> ); } } ReactDOM.render( <MyComponent />, document.getElementById('app') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>