J'ai exécuté un didacticiel de téléchargement de fichiers React et je veux y ajouter. J'essaie de faire en sorte que lorsqu'un utilisateur clique sur le message de téléchargement, le navigateur l'invite à dire "Votre fichier est en cours de téléchargement" Je ne suis en aucun cas un développeur frontend, alors pardonnez-moi si cette question est super nooby. Pour une raison quelconque, lorsque j'utilise ce code, si vous accédez à la page Web, le code de la fonction s'exécute une fois, puis à nouveau sur un clic. Mon utilisation prévue est de ne fonctionner que sur un clic, une idée de ce que je fais mal?
import React, { Component } from 'react'
import { Alert } from 'react-alert'
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
imageURL: '',
};
this.handleUploadImage = this.handleUploadImage.bind(this);
}
handleUploadImage(ev) {
ev.preventDefault();
const data = new FormData();
data.append('file', this.uploadInput.files[0]);
data.append('filename', this.fileName.value);
fetch('http://localhost:8000/upload', {
method: 'POST',
body: data,
}).then((response) => {
response.json().then((body) => {
this.setState({ imageURL: `http://localhost:8000/${body.file}` });
});
});
}
render() {
return (
<form onSubmit={this.handleUploadImage}>
<div>
<input ref={(ref) => { this.uploadInput = ref; }} type="file" />
</div>
<div>
<input ref={(ref) => { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" />
</div>
<br />
<div>
<button onclick="myFunction()">Upload</button>
<script>
function myFunction() {
alert("Your file is being uploaded!")
}
</script>
</div>
<img src={this.state.imageURL} alt="img" />
</form>
);
}
}
export default Main;
Changement
<form onSubmit={this.handleUploadImage}>
À
<form onSubmit={e => this.handleUploadImage(e)}>
Cela appellera handleUploadImage uniquement lorsque vous cliquez sur