ファイルUplaodが機能しないButton click material-UI V1 ReactJs

Question

ファイルアップロードがMaterial-UI/Buttonクリックで機能しません。

<Button dense 
     containerElement="label" 
     label="label"> 
     <input 
      style={{display: 'none'}} 
      type="file" /> 
    </Button> 

Answer 1

私は解決策を見出しましたが、まだそれを実装するにはより良い方法が必要です。

import React, { Component } from 'react'; 
    import Button from 'material-ui/Button'; 
    import FormControl from '../formcontrol'; 

class FileUpload extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     file: [] 
    }; 
    this.onClick = this.onClick.bind(this); 
    this.onChange = this.onChange.bind(this); 
} 

onClick = (inputValue) => { 
    document.getElementById("fileInput").click() 
} 

onChange = (file, onChange) => { 
    console.log(this.state.file); 
} 

render() { 
    const { classes, onChange } = this.props; 
    const { file } = this.state; 

    return (
     <FormControl> 
      <div> 
       <input type="file" style={{ display: 'none' }} id="fileInput" onChange={e => { 
        this.onChange(e.currentTarget.files[0], onChange); 
       }} /> 

       <Button className={classes.button} 
        raised 
        containerElement='label' 
        color="default" 
        label='My Label' 
        onClick={(event) => this.onClick(event)} }> 
        Upload 
       < Icon className={this.props.classes.rightIcon}>file_upload</Icon> 
       </Button> 
      </div> 
     </FormControl > 
    ); 

    } 

} 

export default FileUpload;