如何僅使用 CSS 在 React 中實(shí)現(xiàn)圖像拖放

React 在構(gòu)建交互式 UI 方面得到了廣泛認(rèn)可。在本教程中，我們將指導(dǎo)您僅使用 CSS 在 React 中創(chuàng)建圖像拖放功能。

第 1 步：設(shè)置你的 React 項(xiàng)目

首先設(shè)置您的 React 項(xiàng)目。您可以使用 create-react-app 進(jìn)行簡(jiǎn)單設(shè)置。

npx create-react-app drag-and-drop

第2步：更新App.js和App.css

接下來(lái)，修改 App.js 文件以創(chuàng)建圖像和標(biāo)題的容器。

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 中，設(shè)置頁(yè)面樣式：

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

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

第三步：創(chuàng)建ImageContainer組件

創(chuàng)建一個(gè)新文件 ImageContainer.js 并定義一個(gè)基本的拖放容器。

import React from 'react';

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

export default ImageContainer;

在 ImageContainer.css 中設(shè)置此容器的樣式：

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

第四步：添加圖片上傳功能

通過(guò)文件輸入和用戶文本說(shuō)明增強(qiáng) ImageContainer。

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;

并設(shè)置上傳容器的樣式：

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

第 5 步：預(yù)覽圖像

修改組件，有條件地渲染上傳的圖片或拖放區(qū)域。

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;

現(xiàn)在您可以運(yùn)行應(yīng)用程序并享受使用 React 和 CSS 編寫(xiě)圖像拖放功能的樂(lè)趣。

本教程介紹了如何使用 React 設(shè)置基本的圖像拖放區(qū)域、利用文件輸入和 CSS 進(jìn)行樣式設(shè)置以及處理圖像預(yù)覽。

以上是如何在 React 中實(shí)現(xiàn)圖像拖放的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！