I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located after it has disappeared.
<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
<Button className={classes.addImage} onClick={this.addPic}>
<input
className={classes.takePic}
ref="file"
id="takePic"
type="file"
accept="image/*"
onChange={this.onChange}
/>
Add
<br></br>
Image
</Button>
</Grid>
Styling:
addImage: {
display: 'flex',
backgroundColor: 'black',
color: 'white',
borderRadius: 90,
height: 100,
width: 100,
justifySelf: 'flex-end',
marginRight: '12.5%',
},
onChange function:
onChange = () => {
let newfile = this.refs.file.files[0];
let reader = new FileReader();
let url = reader.readAsDataURL(newfile);
reader.onloadend = () => {
this.setState({
...this.state,
openModal: true,
imgSrc : [reader.result],
imageType: newfile.type,
newfile: newfile,
filename: `${this.props.user.id}_${Date.now()}`
})
console.log(newfile)
console.log(this.state)
}
}
addPic function:
addPic = () => {
document.getElementById('takePic').click()
}