reactJS素材UIアイコンファイルをアップロードするボタン

Question

IconButtonを使用してファイルをアップロードするためのディレクトリを開くにはどうすればよいですか？

以下のコードを使用して

<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> 

Answer 1

いくつかのこと：

1. あなたはIconButtonにtype='file'を必要としません、入力時にのみ

2. IconButtonはその子が何もないとは思わないSVGIcon以外の事は、私はあなたが

3. 私はこの場合あなたが入力のためのあなたのタイプの小道具にタイプミスがあり

4. でのstopPropagationを呼び出すことはありません通常のボタンを使用することをお勧めします。あなたはtype="file type='file'です。

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

   をあなたはまだそれがアイコンではなく、ボタンになりたい場合は、私はあなたが<input>で何かをするか、追加することができます疑いがある：それはちょうど一緒にそのすべて入れて、だから、type="file"

する必要がありますラベルのないFlatButtonの子として使用します。

Answer 2

次のコードを使用して、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} />