Question

我尝试使用来自materila-ui的文件上传器，但它似乎不起作用并从选择文件中获取输入。任何人都有任何建议如何从文件选择器获取输入并处理它。

<FlatButton
            icon={<i className="material-icons">attachment</i>}
            onclick={e => this._handleChange(e)}
            onchange={e => this._openFileDialog(e)}
          >
            <input type="file" style={styles.uploadInput} />
          </FlatButton>

http://material-ui.com/#/components/flat-button

Answer 1

不是在FlatButton上定义onChange事件，而是在input元素上定义它，将其写成：

<FlatButton
      icon={<i className="material-icons">attachment</i>}
      onClick={e => this._handleChange(e)}
>
    <input type="file" onChange={this._handleFileUpload.bind(this)}/>
</FlatButton>

然后使用onChange在e.target.files方法中，您可以访问所选文件：

_handleFileUpload(e){
   console.log(e.target.files);
}

Answer 2

您应该将按钮包裹在标签中，并将其指向可以隐藏的文件输入。

<label htmlFor={id}>
  <FlatButton />
</label>
<input type="file" id={id} onChange={(e) => {
  const file = e.target.files[0];
  // do stuff
}}

在构造函数中生成随机id以在此处使用。

Flatbutton（输入处理程序）似乎不起作用

2 个答案: