reactJS材質UI圖標按鈕上傳文件

我想知道如何打開目錄以使用IconButton上傳文件？reactJS材質UI圖標按鈕上傳文件

<IconButton 
    iconClassName="fa fa-plus-square" 
    onClick={(e) => e.stopPropagation()} 
    type='file' 
/>

使用下面的代碼顯示了上傳文件的圖標按鈕和其他按鈕

<IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()}> 
    <input type="file type='file'> 
</IconButton>

來源

2016-03-28 dczii

有幾件事情：

你不需要在IconButton type='file'，只是在輸入
IconButton不指望它的孩子是任何不是SVGIcon其他的事情，所以我建議你使用一個普通按鈕
我不會稱之爲stopPropagation在這種情況下
您的道具類型爲輸入一個錯字。你有type="file type='file'。它應該只是type="file"

因此，把所有在一起：

<FlatButton label="Choose file" labelPosition="before"> 
    <input type="file" style={styles.exampleImageInput} /> 
</FlatButton>

如果您仍然希望它是一個圖標，而不是一個按鈕，我懷疑你可以做一些事情<input>或加它作爲FlatButton沒有標籤的孩子。

來源

2016-03-28 13:04:36

使用以下代碼可以實現與IconButton相同的功能。

<IconButton onClick={() => this.fileUpload.click()}> 
    <FontIcon className="material-icons" > 
     add_a_photo 
    </FontIcon> 
    </IconButton> 
<input type="file" ref={(fileUpload) => { 
        this.fileUpload = fileUpload; 
        }} 
    style={{ visibility: 'hidden'}} onChange={this.groupImgUpload} />

來源

2017-12-07 01:32:24

reactJS材質UI圖標按鈕上傳文件

回答

相關問題