文件上传不适用于 Material-UI/按钮点击。

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

最佳答案

我找到了解决方案，但仍需要更好的方法来实现它。

  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;

https://stackoverflow.com/questions/47523560/