Comment implémenter le glisser-déposer d'image dans React en utilisant uniquement CSS

React est largement reconnu pour la création d'interfaces utilisateur interactives. Dans ce didacticiel, nous vous guiderons dans la création d'une fonctionnalité glisser-déposer pour les images dans React avec uniquement du CSS.

étape 1?: Configurez votre projet React

Commencez par configurer votre projet React. Vous pouvez utiliser create-react-app pour une configuration facile.

npx create-react-app drag-and-drop

étape 2?: Mettre à jour App.js et App.css

Ensuite, modifiez le fichier App.js pour créer un conteneur pour l'image et un en-tête.

import './App.css';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area"></div>
    </div>
  );
}

export default App;

Dans App.css, stylisez la page?:

.App {
  text-align: center;
  width: 100vw;
  height: 100vh;
}

.heading {
  font-size: 32px;
  font-weight: 500;
}

étape 3?: créer le composant ImageContainer

Créez un nouveau fichier ImageContainer.js et définissez un conteneur de base par glisser-déposer.

import React from 'react';

const ImageContainer = () => {
  return (
    <div className="image-container"></div>
  );
};

export default ImageContainer;

Stylisez ce conteneur dans ImageContainer.css?:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

étape 4?: Ajouter une fonctionnalité de téléchargement d'images

Améliorez ImageContainer avec une entrée de fichier et des instructions textuelles pour l'utilisateur.

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      <div className="upload-container">
        <input
          type="file"
          className="input-file"
          accept=".png, .jpg, .jpeg"
          onChange={onChange}
        />
        <p>Drag & Drop here</p>
        <p>or</p>
        <p>Click</p>
      </div>
    </div>
  );
};

export default ImageContainer;

Et stylisez le conteneur de téléchargement?:

.image-container {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 0, 0, .3);
}

.upload-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.upload-container > p {
  font-size: 18px;
  margin: 4px;
  font-weight: 500;
}

.input-file {
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

étape 5?:?prévisualiser l'image

Modifiez le composant pour rendre conditionnellement l'image téléchargée ou la zone de glisser-déposer.

import React from 'react';
import './ImageContainer.css';

const ImageContainer = () => {
  const [url, setUrl] = React.useState('');

  const onChange = (e) => {
    const files = e.target.files;
    if (files.length > 0) {
      setUrl(URL.createObjectURL(files[0]));
    }
  };

  return (
    <div className="image-container">
      {url ? (
        <img className="image-view">



<h3>
  
  
  Step 6: Import and Run the Application
</h3>

<p>Finally, import ImageContainer into App.js and run the app.<br>
</p>

<pre class="brush:php;toolbar:false">import './App.css';
import ImageContainer from './ImageContainer';

function App() {
  return (
    <div className="App">
      <h2 className="heading">Select Image:</h2>
      <div className="image-area">
        <ImageContainer />
      </div>
    </div>
  );
}

export default App;

Vous pouvez désormais exécuter l'application et profiter du codage de la fonction glisser-déposer de votre image avec React et CSS.

Le didacticiel explique comment configurer une zone de glisser-déposer de base pour les images avec React, en utilisant la saisie de fichiers et CSS pour le style et en gérant l'aper?u de l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!