7
votes

Comment lire et télécharger un fichier dans reactjs à l'aide du bouton personnalisé

Je veux télécharger et lire un fichier localement, mais je veux le faire en utilisant un bouton personnalisé n'utilisant pas d'entrée HTML.

<input type="file" id="my_file_input" style={{display:"none"}}/>
<label htmlFor="my_file_input">
    <RaisedButton
        label="Import from Excel"
        labelColor="#FFFFFF"
        backgroundColor="#01579b"
        />
</label>

J'ai trouvé de cette façon mais je ne veux pas utiliser cette forme ou ce bouton, je voulais utiliser un bouton en relief de l'interface utilisateur pour faire cette fonctionnalité pour correspondre à l'autre bouton du site.

J'ai également essayé la méthode suivante mais cela n'a pas fonctionné car en cliquant sur le bouton rien ne s'est passé.

<input type="file" id="my_file_input" />

J'ai pensé que je devrais faire la fonctionnalité de téléchargement / lecture de fichier manuellement dans la fonction onClick du RaisedButton mais je n'ai pas trouvé de moyen de le faire.

Y a-t-il donc une autre solution à ce problème dans react?

javascript reactjs

3 commentaires

Vous pouvez le faire avec HTML / CSS: Remplacez le fichier d'entrée par mon propre bouton dans le formulaire

@HereticMonkey fonctionne en html mais ne fonctionne pas en react

Bien sûr que oui. La solution ne dépend pas de JavaScript et React est JavaScript. Si vous ne pouvez vraiment pas le faire fonctionner, modifiez votre question pour inclure un exemple minimal reproductible , montrant comment vous l'avez implémenté et comment cela" ne fonctionne pas ". Vous pouvez utiliser Stack Snippets pour créer un extrait exécutable ici sur Stack Overflow.

3 Réponses :

1
votes

veuillez lire l'API de React Material https://material-ui.com/demos/buttons/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <input
        accept="image/*"
        className={classes.input}
        id="contained-button-file"
        multiple
        type="file"
      />
      <label htmlFor="contained-button-file">
        <Button variant="raised" component="span" className={classes.button}>
          Upload
        </Button>
      </label>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ContainedButtons);

0 commentaires

6
votes

J'espère que ce code vous aidera. Nous pouvons le résoudre de deux manières.

1-)

HTML

fileUploadButton = () => {
document.getElementById('fileButton').click();
document.getElementById('fileButton').onchange = () =>{      
this.setState({
    fileUploadState:document.getElementById('fileButton').value
        });
    }
}

REACT CONSTRUCTOR

this.state = {fileUploadState:""}

0 commentaires

-1
votes

Comme le dit le document, il vous suffit d'ajouter:

component="span"

Au composant bouton.

0 commentaires