Erstellen Sie ein Bild per Drag & Drop mit CSS in React

React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen und aufgrund ihrer Flexibilität und Vielseitigkeit eine gute Wahl für die Erstellung interaktiver Anwendungen. In diesem Tutorial zeigen wir Ihnen, wie Sie in React nur mit CSS eine Drag-and-Drop-Funktion für Bilder erstellen.

Schritt 1 –

Zunächst richten wir ein React-Projekt ein. Sie können entweder „React App erstellen“ oder eine andere Einrichtungsmethode verwenden, die für Sie am besten geeignet ist. Lassen Sie uns eine React-Anwendung mit create-react-app erstellen.

npx create-react-app drag-and-drop

Schritt 2 –

Ersetzen Sie App.js und App.css durch den folgenden Code.

App.js

import './App.css';

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

      </div>
    </div>
  );
}

export default App;

App.css

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

}

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

Schritt 3 –

Erstellen Sie nun eine neue Datei und Komponente ImageContainer.js im src-Verzeichnis und nehmen Sie ein div für den Drag-and-Drop-Container.

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

    return (
        <div className="image-container">

        </div>
    );
};

export default ImageContainer;

Erstellen Sie dann eine CSS-Datei ImageContainer.css im src-Verzeichnis und fügen Sie dem Bildcontainer einige Stile hinzu.

ImageContainer.css

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

Schritt 4 –

Jetzt nehmen wir ein Div mit einem Eingabefeld und einem Eingabetexttitel innerhalb der .image-container-Klasse und fügen der Datei ImageContainer.css etwas Stil hinzu. Wir nehmen außerdem einen Status für die Bild-URL und eine onChage-Funktion für den Aktualisierungsstatus.

ImageContainer.js wird sein

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

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

    const onChange = (e) => {
        const files = e.target.files;
        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;

ImageContainer.css wird sein

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

Schritt 5 –

Jetzt zeigen wir eine bedingte Vorschau der Bilddatei an. Wenn Sie ein Bild abgelegt haben, wird das Bild und/oder der Drag-and-Drop-Bereich gerendert.

ImageContainer.js wird sein

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

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

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

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



<h2>
  
  
  Step 6 —
</h2>

<p>Now we will import the ImageContainer component in our App.js and run our application using the npm start command and have fun while coding.</p>

<p><strong>App.js will be</strong><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;

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie eine Drag-and-Drop-Funktion für Bilder nur mit CSS in React erstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Bild per Drag & Drop mit CSS in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!