Cara Melaksanakan Drag-and-Drop Imej dalam React

Cara Melaksanakan Seret-dan-Lepaskan Imej dalam Reaksi Hanya Menggunakan CSS

React diiktiraf secara meluas untuk membina UI interaktif. Dalam tutorial ini, kami akan membimbing anda membuat ciri seret dan lepas untuk imej dalam React dengan hanya CSS.

Langkah 1: Sediakan Projek React Anda

Mulakan dengan menyediakan projek React anda. Anda boleh menggunakan create-react-app untuk persediaan yang mudah.

npx create-react-app drag-and-drop

Langkah 2: Kemas kini App.js dan App.css

Seterusnya, ubah suai fail App.js untuk mencipta bekas untuk imej dan tajuk.

import './App.css';

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

export default App;

Dalam App.css, gayakan halaman:

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

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

Langkah 3: Cipta Komponen ImageContainer

Buat fail baharu ImageContainer.js dan tentukan bekas seret dan lepas asas.

import React from 'react';

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

export default ImageContainer;

Gayakan bekas ini dalam ImageContainer.css:

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

Langkah 4: Tambah Fungsi Muat Naik Imej

Tingkatkan ImageContainer dengan input fail dan arahan teks untuk pengguna.

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;

Dan gayakan bekas muat naik:

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

Langkah 5: Pratonton Imej

Ubah suai komponen untuk memaparkan secara bersyarat imej yang dimuat naik atau kawasan seret dan lepas.

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;

Kini anda boleh menjalankan apl dan menikmati pengekodan ciri drag-and-drop imej anda dengan React dan CSS.

---

Tutorial merangkumi cara menyediakan kawasan seret dan lepas asas untuk imej dengan React, menggunakan input fail dan CSS untuk penggayaan dan mengendalikan pratonton imej.

Atas ialah kandungan terperinci Cara Melaksanakan Drag-and-Drop Imej dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!