Question

我试图将按钮实现为文件类型的输入字段，我试图用按钮包装输入字段，然后将其隐藏。但是，这不起作用，因为当我单击按钮时什么也没有发生。我没有对话框从本地计算机中选择文件。这是我的组件：

{'id': '1', 
'settings': '183', 
'digitizer': 'LoremID', 
'timestamp': '42', 
'triggershift': {'samples': '0'}, 
'trace': {'channel': '0'}}

我在几个地方看到这是建议的解决方案，所以我想知道为什么它不起作用？

Answer 1

从Material-UI文档/示例https://material-ui.com/components/buttons/#contained-buttons中：

<input
    accept="image/*"
    className={classes.input}
    id="contained-button-file"
    multiple
    type="file"
  />
  <label htmlFor="contained-button-file">
    <Button variant="contained" component="span" className={classes.button}>
      Upload
    </Button>
  </label>

所以您可以尝试：

class MediaPlaceholder extends Component {
  constructor(props){
    super(props)
    this.state = {
      file: null
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      file: URL.createObjectURL(event.target.files[0])
    })
  }
  render() {
    const {classes} = this.props;
    return (
      <Paper className={classes.media}>
        <div>
          <input
              accept="image/*"
              className={classes.input}
              id="upload-file"
              type="file"
            />
          <label htmlFor="upload-file">
            <Button  onClick={this.handleChange.bind(this)}>
              Add media...
            </Button>
          </label>
        </div>
      </Paper>
    );
  }
}

React Mui按钮输入文件未打开本地machin文件目录

1 个答案: