理系公務員のプログラミング日記

ReactとLaravelの接続について

まずはReactでのフォームのシンプルな実装例を紹介します。

useState()を使い、入力フォームの値を保存する変数と設定するsetter関数（setTitle,setAuthor)を作製します。

それぞれのsetterを入力フォームの値が変化した際のイベントであるChangeイベントの発火時に呼び出されるonChange()メソッドの中で呼び出すことで、フォームに入力された値を取得できます。

取得した値は、submitボタンを押した際のイベントであるSubmitイベントの発火時に呼び出されるonSubmit()メソッドによって動作するhandleSubmit()関数の中で処理しています。

BookForm.jsx

import { useState } from "react";

 export const BookForm = () => {

    const [title, setTitle] = useState('');
    const [author, setAuthor] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(title, author)
    }

    return (
        <form onSubmit = {handleSubmit}>
            <label htmlFor="title">title:</label>
            <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)} / >
            <br />
            <label htmlFor="author">author:</label>
            <input id="author" type="text" value={author} onChange={(e) => setAuthor(e.target.value)} />
            <br />
            <button type="submit">送信</button>
        </form>
    )
}

handleSubmit()について

このhandleSubmit()関数の中でまず最初に動作するe.preventDefault();は、入力フォームの標準の動作（action=""で指定されたURLに移動する）をキャンセルしています。

ここでconsoleで目的のデータを取得できていることが確認できたら、 axiosを使ってデータをLaravelのapiに送信します。

次の実装では、このhandleSubmit()関数の中でpost通信を行うpostData()関数を呼び出しています。

import { useState } from "react";
import axios from 'axios'

 export const BookForm = () => {

    const [title, setTitle] = useState('');
    const [author, setAuthor] = useState('');

    const postData = async () => {
        try {
            const url = 'http://127.0.0.1:8000/api/books'; // リクエストを送るURL
            const data = {
                title: title,
                author: author
            };

            const response = await axios.post(url, data, {
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            console.log('Response:', response.data); // レスポンスがあれば
        } catch (error) {
            console.error('Error',error)
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(title, author)
        postData()  //apiの実行
    }

    return (
      // 略
    )
 }

Laravel側でpostを受け取る

api.phpで、POSTを受け取ることができるようにルーティングを追加します。

routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BookController;


Route::get('/books',[BookController::class,'index']);
/* 追加 */
Route::post('/books',[BookController::class,'store']);

これに連動するようにBookControllerにstoreアクションを追加します。

BookController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BookController extends Controller
{
    public function index(){
      // 略
    }

    public function store(Request $request){
          // データベースに追加する処理
          // 省略

          return ['message'=>'OK'];
  }
}

受け取ったデータをデータベースに追加する処理は省略します。 return として'OK'というメッセージを返しているので、 その内容がReact側のconsoleで確認できれば完了です。

おまけ:Material UIを使う場合

React側の入力フォームをMaterial UIで実装した場合は次の通りです。

必要なライブラリをインストールしてから、

npm install @mui/material @emotion/react @emotion/styled

return が次のようになります。

import { useState } from 'react';
import axios from 'axios';
import { TextField, Button, Box, Typography } from '@mui/material';

export const BookForm = () => {

  // 略

  return (
    <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
      <Typography variant="h6" component="div" gutterBottom>
        Book Information
      </Typography>
      <TextField
        id="title"
        label="Title"
        variant="outlined"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        fullWidth
      />
      <TextField
        id="author"
        label="Author"
        variant="outlined"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        fullWidth
      />
      <Button type="submit" variant="contained" color="primary">
        送信
      </Button>
    </Box>
  );
};

（基本的なロジックを素のReactで実装して動作確認が完了したら、 ChatGPTに「このコードをMaterial UIを使ったコードに変換して」が楽でおすすめです。。）