Material-UI + React file-upload button 먹통 현상

문제

Material-UI + React 로 사용한 버튼 중에서 파일 업로드를 위한 버튼은 좀 특이하다.

버튼인데 OnClick을 정의하지 않고 사용하기 때문이다.

그 대신, input children으로 클릭을 받아서, 업로드에 필요한 파일을 가져올 수 있다.

문제는 클릭할 때 이벤트가 버튼에만 머물고 input 으로 전달이 안되어 먹통 현상을 겪었다.

해결

<Button
  variant="contained"
  component="label"
  className={buttonStyle.secondary_button}>
  <Typography
      className={textStyle.primary_15_bold}>
      {"변경"}</Typography>

  <input id={"file-input"} style={{ display: 'none' }} type="file" name="imageFile"
      onChange={handleChangeImage} />
</Button>

참고자료

https://stackoverflow.com/questions/40589302/how-to-enable-file-upload-on-reacts-material-ui-simple-input