Reactのフォーム内容をLaravelに投げて保存する

送るまでの流れ

1. Laravelに諸々のルートを書く
2. 保存する処理をLaravelに書く
3. Reactのフォームのinputタグの値が変わったらstateに値を入れる
4. 送信ボタンが押されたらstateをLaravelに送る

の順番で送りたいと思います

いるもの

###axios

npm install axios --save

REST-API を実行したいときに､これを使うと実装が簡単にできるみたいです｡今回はこれを使います。

Laravelに諸々のルートを書く

Laravelのroutesの下にある、api.phpに以下のように記述します。

routes/api.php

Route::group(['middleware' => 'api'], function () {
    Route::post('example', 'App\Http\Controllers\ExampleController@save');
});

この記述で、フロントで'/api/example'のURLが叩かれたらExampleControllerのsave関数を呼び出すと言う処理になっています。

保存する処理をLaravelに書く

次に、ExampleControllerのsave関数に保存する処理を書いていきます。これは普通のLaravelと同じ処理です。(モデルも用意してください。ここではExampleというモデルに保存するとしています。)

App\Http\Controllersの中にExampleController.phpを作ります。

Controllers\ExampleController.php

public function save(Request $request)
{
     $example = new Example;
     $example->name = $request->name;
     $example->password = $request->password;
     $example->save();
     return response()->json($example, 200);
}

これで保存する処理ができました。

フォームのinputタグの値が変わったらstateに値を入れる

次にReact側の処理を書いていきます。

index.js

//Laravelに送るためのstate
const [data,setData] = useState();

<form name="example" onChange={onChange}>
	<input name='name' type='text'/>
	<input name='password' type='password'/>
	<div onClick={onClick}>送信</div>
</form>

3の、フォームのinputタグの値が変わったらstateに値を入れる部分の関数onChangeを、formのonChange属性に入れます。4の送信ボタンが押されたらstateをLaravelに送る部分の関数onClickをonClick関数に入れます。onChange関数は以下の内容にします。

index.js

const onChange = () => {
    let groupName = document.forms.example.groupName.value;
    let password = document.forms.example.password.value;
    //dataをオブジェクトにしてセット
    setData({
        groupName: groupName,
        password: password,
    });
}

これで、formの値が変わったらonChange関数の中でdata関数の中にフォーム情報がセットされるようになりました。

送信ボタンが押されたらstateをLaravelに送る

index.js

//上の方に追記
import axios from 'axios';

const onClick = async()=>{
    await axios.post('/api/create',data)
    .then((res) => {
        setData('');
        location.href = 'この中に遷移したい先のページのパスを書く';
    }).catch(error => {
        console.log(error);
    });
}

これでそぞんできたかと思います。
ご参考になれば幸いです。