React.js calling a button click from a different button

Question

I am trying to to make a function that calls a button click. I know how to do this using document.getElementById('takePic').click() but I am not sure how to do this in React.

I am using an input element in order to access a devices camera, but unfortunately the input button that generates cannot be easily formatted.

<input className={classes.takePic} type="file" accept="image/*"></input>

So what I want to do is set this input element's display to none and then instantiate the button click through the click of another button.

<Button className={classes.addImage} onClick="">

I am using material-ui if that makes a difference.

Answer 1

you can do this way :

<input id="takePic" className={classes.takePic} type="file" accept="image/*" />

<Button className={classes.addImage} onClick={this.handleClick}>


 handleClick=()=>{
   document.getElementById('takePic').click();
}

read more here : https://www.w3schools.com/jsref/met_html_click.asp