React で CSS を使用して画像をドラッグ アンド ドロップする

React は、ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、その柔軟性と多用途性により、インタラクティブなアプリケーションの構築に最適です。このチュートリアルでは、React で CSS のみを使用して画像のドラッグ アンド ドロップ機能を作成する方法を示します。

ステップ 1 —

まず、React プロジェクトをセットアップしましょう。 Create React App またはその他の最適なセットアップ方法を使用できます。 create-react-app を使用して React アプリケーションを作成しましょう。

npx create-react-app drag-and-drop

ステップ 2 —

App.js と App.css を以下のコードに置き換えます。

App.js

import './App.css';

function App() {
  return (
    <div classname="App">
      <h2 id="Select-Image">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 —

次に、src ディレクトリに新しいファイルとコンポーネント ImageContainer.js を作成し、コンテナをドラッグ アンド ドロップするための div を取得します。

ImageContainer.js

import React from 'react';

const ImageContainer = () => {

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

        </div>
    );
};

export default ImageContainer;

次に、src ディレクトリに CSS ファイル ImageContainer.css を作成し、イメージ コンテナにいくつかのスタイルを追加します。

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 —

ここで、入力フィールドを持つ div を取得し、.image-container クラス内にテキスト タイトルを入力し、ImageContainer.css ファイルにスタイルを追加します。また、画像 URL の状態と、更新状態の onChage 関数も取得します。

ImageContainer.js は
になります

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 は
になります

.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 —

次に、画像ファイルを条件付きでプレビューします。画像をドロップした場合は、画像がレンダリングされるか、ドラッグ アンド ドロップ領域がレンダリングされます。

ImageContainer.js は
になります

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" alt="React で CSS を使用して画像をドラッグ アンド ドロップする" >



<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 id="Select-Image">Select Image:</h2>
      <div classname="image-area">
        <imagecontainer></imagecontainer>
      </div>
    </div>
  );
}

export default App;

このチュートリアルでは、React で CSS のみを使用して画像のドラッグ アンド ドロップ機能を作成する方法を説明しました。