réagir ouvrir le navigateur de fichier, cliquez sur une div

Mon réagir composant:

import React, { PropTypes, Component } from 'react'


class Content extends Component {
    handleClick(e) {
        console.log("Hellooww world")
    }
    render() {
        return (
            <div className="body-content">
                <div className="add-media" onClick={this.handleClick.bind(this)}>
                    <i className="plus icon"></i>
                    <input type="file" id="file" style={{display: "none"}}/>
                </div>
            </div>
        )
    }
}

export default Content

Ici lorsque je clique sur un div avec l'icône que je veux ouvrir un <input> fichier qui me montre option pour sélectionner les photos. Après avoir sélectionné les photos que je veux obtenir la valeur la photo est sélectionné. Comment puis-je le faire de réagir ??

OriginalL'auteur aryan | 2016-05-26

reactjs

20

Ajouter l'attribut ref de votre entrée:
```
<input type="file" id="file" ref="fileUploader" style={{display: "none"}}/>
```
Changer le handleClick fonction:
```
handleClick(e) {
    this.refs.fileUploader.click();
}
```
Puisque vous utilisez ES6, vous aurez besoin de lier cela à votre handleClick fonction, et nous pouvons le faire dans le constructeur:
```
constructor (props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}
```
Ne fonctionne pas désolé
C'est juste pour ouvrir la boîte de dialogue.

OriginalL'auteur Abderrahman Brini

Les autres, juste de mettre des commentaires sur vous affichez, vous aurez besoin de gérer le changement de saisie de contenu. Pour ce faire, mettre en œuvre onChange, et obtenir ouvert le fichier info, comme ceci:

<input id="myInput"
   type="file"
   ref={(ref) => this.upload = ref}
   style={{display: 'none'}}
   onChange={this.onChangeFile.bind(this)}
/>

<RaisedButton
    label="Open File"
    primary={false}
    onClick={()=>{this.upload.click()}}
/>


onChangeFile(event) {
    event.stopPropagation();
    event.preventDefault();
    var file = event.target.files[0];
    console.log(file);
    this.setState({file}); ///if you want to upload latter
}

Console de sortie:

File {
  name: "my-super-excel-file.vcs", 
  lastModified: 1503267699000, 
  lastModifiedDate: Sun Aug 20 2017 19:21:39 GMT-0300 (-03), 
  webkitRelativePath: "", 
  size: 54170,
  type:"application/vnd.vcs"
}

Et maintenant vous pouvez l'utiliser comme vous le souhaitez. Mais, si vous voulez les TÉLÉCHARGER, vous devez commencer avec:

var form = new FormData();
form.append('file', this.state.file);

YourAjaxLib.doUpload('/yourEndpoint/',form).then(result=> console.log(result));

OriginalL'auteur Tiago Gouvêa

Réagir 16.3 fournit une meilleure approche, à l'aide de Réagir.createRef() la méthode. Voir https://reactjs.org/blog/2018/03/29/react-v-16-3.html#createref-api

Tapuscrit exemple:

export class MainMenu extends React.Component<MainMenuProps, {}> {

private readonly inputOpenFileRef : RefObject<HTMLInputElement>

constructor() {
    super({})

    this.inputOpenFileRef = React.createRef()
}

showOpenFileDlg = () => {
    this.inputOpenFileRef.current.click()
}

render() {

    return (
       <div>
                <input ref={this.inputOpenFileRef} type="file" style={{display:"none"}}/>
                <button onClick={this.showOpenFileDlg}>Open</Button>
      </div>
    )
}
}

OriginalL'auteur leonidv

2

Télécharger une nouvelle réponse à l'aide de Réagir Crochets

D'abord créer votre Entrée ref crochet
```
const inputFile = useRef(null) 
```
Puis le mettre à votre ENTRÉE et ajouter un style display:none pour l'entrée ne sera pas affichée dans l'écran
```
<input type='file' id='file' ref={inputFile} style={{display: 'none'}}/>
```
Puis de créer votre fonction pour gérer le fichier ouvert, la fonction doit être à l'intérieur de la même fonction que vous utilisez, le useRef Crochet
```
 const onButtonClick = () => {
    //`current` points to the mounted file input element
   inputFile.current.click();
  };
```
Alors définir la fonction d'un élément de Bouton
```
 <button onClick={onButtonClick}>Open file upload window</button>
```
API pour le code HTML du FICHIER d'ENTRÉE

OriginalL'auteur Angel

Vous devez vous connecter pour publier un commentaire.