componentsディレクトリにProductsディレクトリを作成する
Productsディレクトリ内にImageArea.jsxを作成し、以下のように画像アップロード用コンポーネントを作成する
※ 今回はMUIのicon（Material Icons）を使って、画像アップロードができることを表現する
▼コード例
/**
* <input type="file" />で、クリックするとエクスプローラーやfinderが表示されて、
* ファイルや画像がアップロードできるようになる
* 今回はアイコンをクリックでfinderを表示させたいので、labelタグでラップしつつ、inputタグは
* CSSで非表示にさせている（display: none;）
*/
import { IconButton, styled } from "@mui/material";
import React from "react";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
// フォーカス時の影の形を調整
const CustomizedIconButton = styled(IconButton)`
height: 48px;
width: 48px;
`;
const ImageArea = (props) => {
return (
<div>
<div className="u-text-right">
<span>商品画像を登録する</span>
<CustomizedIconButton>
<label>
<AddPhotoAlternateIcon />
<input className="u-display-none" type="file" id="image" />
</label>
</CustomizedIconButton>
</div>
</div>
);
};
export default ImageArea;
ProductEdit.jsxを開き、ImageAreaコンポーネントを設置する
npm start を実行し、意図した表示がされているか一旦確認する
▼コード例
import React, { useCallback, useState } from "react";
import { PrimaryButton, SelectBox, TextInput } from "../components/UIkit";
import { useDispatch } from "react-redux";
import { saveProduct } from "../reducks/products/operations";
**import ImageArea from "../components/Products/ImageArea";**
const ProductEdit = () => {
〜〜〜
return (
<section>
<h2 className="u-text__headline u-text-center">商品の登録・編集</h2>
<div className="c-section-container">
**<ImageArea />**
〜〜〜
</section>
);
};
export default ProductEdit;
▼イメージ画像
