React で画像のドラッグアンドドロップを実装する方法-CSSチュートリアル-php.cn

React で画像のドラッグアンドドロップを実装する方法

Patricia Arquette

リリース： 2025-01-05 00:01:39

オリジナル

840 人が閲覧しました

How to Implement Image Drag-and-Drop in React

CSS のみを使用して React で画像のドラッグアンドドロップを実装する方法

React はインタラクティブな UI の構築として広く知られています。このチュートリアルでは、CSS だけを使用して React で画像のドラッグアンドドロップ機能を作成する方法を説明します。

ステップ 1: React プロジェクトをセットアップする

まず、React プロジェクトをセットアップします。 create-react-app を使用すると簡単にセットアップできます。

npx create-react-app drag-and-drop

ログイン後にコピー

ステップ 2: App.js と App.css を更新する

次に、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;
}

ログイン後にコピー

ステップ 3: ImageContainer コンポーネントを作成する

新しいファイル ImageContainer.js を作成し、基本的なドラッグアンドドロップコンテナを定義します。

import React from 'react';

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

export default ImageContainer;

ログイン後にコピー

ImageContainer.css でこのコンテナのスタイルを設定します:

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

ログイン後にコピー

ステップ 4: 画像アップロード機能を追加する

ファイル入力とユーザーへのテキスト指示を使用して 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;

ログイン後にコピー

アップロードコンテナのスタイルを設定します。

.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: 画像をプレビューする

アップロードされた画像またはドラッグアンドドロップ領域を条件付きでレンダリングするようにコンポーネントを変更します。

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;

ログイン後にコピー

これで、アプリを実行し、React と CSS を使用して画像のドラッグアンドドロップ機能のコーディングを楽しむことができます。

このチュートリアルでは、React を使用して画像の基本的なドラッグアンドドロップ領域を設定する方法、スタイル設定にファイル入力と CSS を利用する方法、画像プレビューを処理する方法について説明します。

以上がReact で画像のドラッグアンドドロップを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。