Reactのフォーム内容をLaravelに送信
送るまでの流れ
- Laravelに諸々のルートを書く
- 保存する処理をLaravelに書く
- Reactのフォームのinputタグの値が変わったらstateに値を入れる
- 送信ボタンが押されたらstateをLaravelに送る
の順番で送りたいと思います
手順
axiosのインストール
npm install axios --save
REST-API を実行したいときに、これを使うと実装が簡単にできるみたいです。今回はこれを使います。
Laravelに諸々のルートを書く
Laravelの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); }); }