responseJS материал 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. Вам не нужно type='file' на IconButton, только на входе

2. IconButton не ожидает, что его дети будут любыми вещь, иная чем SVGIcon, поэтому я рекомендую вам использовать обычную кнопку

3. Я бы не назвал stopPropagation в этом случае

4. У вас есть опечатка в вашей типа опоры для ввода. У вас есть type="file type='file'. Это должно быть просто type="file"

Итак, положив, что все вместе:

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

Если вы все еще хотите, чтобы иконка, а не кнопка, я подозреваю, что вы можете сделать что-то с <input> или добавить это как дети 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} />