Comment implémenter le glisser-déposer d'image dans React-tutoriel CSS-php.cn

Comment implémenter le glisser-déposer d'image dans React

Patricia Arquette

Libérer： 2025-01-05 00:01:39

original

840 Les gens l'ont consulté

How to Implement Image Drag-and-Drop in React

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

Copier après la connexion

É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;

Copier après la connexion

Dans App.css, stylisez la page :

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

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

Copier après la connexion

É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;

Copier après la connexion

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);
}

Copier après la connexion

É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;

Copier après la connexion

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;
}

Copier après la connexion

É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;

Copier après la connexion

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!