Buat seret dan lepas Imej dengan CSS dalam React
Jan 05, 2025 pm 06:50 PMReact ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna, dan fleksibiliti serta serba boleh menjadikannya pilihan yang bagus untuk membina aplikasi interaktif. Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat ciri seret dan lepas untuk imej menggunakan CSS sahaja dalam React.
Langkah 1 —
Untuk bermula, mari sediakan projek React. Anda boleh menggunakan sama ada Create React App atau mana-mana kaedah persediaan lain yang paling sesuai untuk anda. Mari buat aplikasi React menggunakan create-react-app.
npx create-react-app drag-and-drop
Langkah 2 —
Ganti App.js dan App.css dengan kod di bawah.
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; }
Langkah 3 —
Sekarang buat fail baharu dan komponen ImageContainer.js dalam direktori src dan ambil div untuk bekas seret dan lepas.
ImageContainer.js
import React from 'react'; const ImageContainer = () => { return ( <div className="image-container"> </div> ); }; export default ImageContainer;
Kemudian buat fail CSS ImageContainer.css dalam direktori src dan tambahkan beberapa gaya dalam bekas imej.
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 —
Sekarang kita akan mengambil div dengan medan input dan tajuk teks input di dalam kelas .image-container dan menambah beberapa gaya dalam fail ImageContainer.css. Kami juga akan mengambil keadaan untuk URL imej dan fungsi onChage untuk keadaan kemas kini.
ImageContainer.js akan menjadi
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 akan menjadi
.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 —
Kini kami akan pratonton fail imej secara bersyarat. Jika anda telah menjatuhkan imej akan memaparkan imej dan atau menyebabkan kawasan seret dan lepas.
ImageContainer.js akan menjadi
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;
Dalam tutorial ini, kami menunjukkan kepada anda cara membuat ciri drag-and-drop untuk imej hanya menggunakan CSS dalam React.
Atas ialah kandungan terperinci Buat seret dan lepas Imej dengan CSS dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Muat naik fail dengan multer di node.js dan ekspres
