👋
Reactのフォーム内容をLaravelに投げて保存する
送るまでの流れ
- Laravelに諸々のルートを書く
- 保存する処理をLaravelに書く
- Reactのフォームのinputタグの値が変わったらstateに値を入れる
- 送信ボタンが押されたら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);
});
}
これでそぞんできたかと思います。
ご参考になれば幸いです。
Discussion