Reactでボタンを使用してファイルをアップロードする方法

まず、Reactプロジェクトを作成し、必要な依存関係をインストールします。

npx create-react-app file-upload-example
cd file-upload-example

次に、ファイルのアップロードを処理するコンポーネントを作成します。以下は、例としてFileUploadという名前のコンポーネントを作成する方法です。

import React, { useState } from 'react';
const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };
  const handleUpload = () => {
    // ファイルのアップロード処理を行うためのコードをここに追加する
    console.log('Selected file:', selectedFile);
  };
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>アップロード</button>
    </div>
  );
};
export default FileUpload;

これで、FileUploadコンポーネントを別のコンポーネントで使用できます。以下は、例としてAppコンポーネントでFileUploadコンポーネントを使用する方法です。

import React from 'react';
import FileUpload from './FileUpload';
const App = () => {
  return (
    <div>
      <h1>ファイルアップロード</h1>
      <FileUpload />
    </div>
  );
};
export default App;

この方法を使用して、Reactでボタンを使用してファイルをアップロードすることができます。必要に応じて、バックエンドの処理やファイルの保存方法について追加の調査と実装が必要になる場合があります。