Откройте диалоговое окно «выбрать файл» on onclick of Raised Button Material ui

Question

У меня есть плавающая кнопка (материал ui) в моем проекте реагирования. Я хочу открыть диалоговое окно «выбрать файл» при каждом щелчке по нему. Я не получаю никакого решения для этого. Я пробовал делать это, но не работал. и я не хочу использовать jquery.

</div> 
      <input id="myInput" type="file" style="visibility:hidden" /> 
      <FloatingActionButton className="floatingButton" backgroundColor='#293C8E' onClick ="$('#myInput').click();"> 
       <ContentAdd /> 
      </FloatingActionButton> 
     </div> 

Может кто-нибудь, пожалуйста, скажите мне, что именно мне нужно делать?

Answer 1

Базовый пример (не включает в себя, что делать с выбранным файлом):

<div> 
    <input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{ display: 'none' }} /> 
    <FloatingActionButton 
     className="floatingButton" 
     backgroundColor='#293C8E' 
     onClick={(e) => this.upload.click() } 
     > 
     <ContentAdd /> 
    </FloatingActionButton> 
    </div> 

Таким образом, ваш обработчик OnClick FloatingActionButton в вручную запускает обработчик click() элемента управления загрузкой скрытого файла (input type = "file"). Ссылка на скрытый контроль загрузки получается путем помещения на него обратного вызова ref и сохранения этой ссылки в «this.upload» (также можно использовать DOM или jQuery для этого, но ref является предпочтительным в React).

здесь рабочий стол jsFiddle: https://jsfiddle.net/432yz8qg/58/

Answer 2

Вы можете сделать трюк с помощью <label/> тега:

<label htmlFor='myInput'> 
    <input id="myInput" type="file" style={{visibility: 'hidden'}} /> 
    <FloatingActionButton 
    className="floatingButton" 
    backgroundColor='#293C8E' 
    > 
    <ContentAdd /> 
    </FloatingActionButton> 
</label> 

Answer 3

Я решил эту проблему в более реактивном режиме, чем решение Jeff, хотя мое решение подразумевает использование нескольких правил CSS.

Я использовал FlatButton с реквизита containerElement установлен на "ярлык":

const { FlatButton, SvgIcon, MuiThemeProvider, getMuiTheme } = MaterialUI; 
 

 
class Example extends React.Component { 
 
    render() { 
 
    const buttonStyle = { 
 
     minWidth: '56px', 
 
     width: '56px', 
 
     minHeight: '56px', 
 
     height: '56px', 
 
     borderRadius: '28px', 
 
    }; 
 
    
 
    return (
 
     <div> 
 
     <FlatButton 
 
      containerElement="label" 
 
      backgroundColor='#293C8E' 
 
      style={buttonStyle} 
 
      > 
 
      <input type="file" style={{ display: 'none' }} /> 
 
     </FlatButton> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const App =() => (
 
    <MuiThemeProvider muiTheme={getMuiTheme() }> 
 
    <Example /> 
 
    </MuiThemeProvider> 
 
); 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

<script src="https://unpkg.com/react@15.2.1/dist/react-with-addons.js"></script> 
 
<script src="https://unpkg.com/react-dom@15.2.1/dist/react-dom.js"></script> 
 
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script> 
 
<div id="container"></div>

Подробнее здесь: https://stackoverflow.com/a/36262984/2590861