【React.js】CRUD作成 Jsonファイルにデータを登録する方法

今回は新たにファイルを作成し、Jsonファイルへデータを送信して、保存する方法を書いていきます。

現時点で、json-serverとaxios がインストールされている必要があります。

CRUDの準備は、こちらの記事をご確認ください。

ファイル作成

register.js ファイルをsrc ディレクトリの配下に作成します。

Registerクラスを作成します。
定型文として覚えてしまいましょう。

全体のコードは、この記事の最後に掲載します。

react

state定義

state に、textinput 変数を追記します。

react

render作成

render に、テキスト入力ボックスを記述します。
onChangeイベント に、handleChangeを加えて、処理を飛ばします。
handleChange は、後ほど作成します。

form に、onSubmitイベント を加えて、dataInput へ処理を飛ばします。
dataInput は、後ほど作成します。

react

index.js に記述して、ブラウザで確認

一旦、register.js から離れて、ブラウザでの表示を確認するため、
index.js に移ります。
次のように、register.js ファイルをインポートして、
<Register /> で、現在作成中のRegisterクラスを登録します。

react

ブラウザをリロードして、テキストボックスが表示されることを確認しましょう。
次のように表示されます。

react

constructor の後に、handleChange を記述します。
handleChange はキーストロークごとに実行されて React の state を更新します。
ここでは、テキストボックスに入力されたデータを受け取り、その値をstateにセットしています。

react

この状態でブラウザからテキストボックスに入力すると、TypeError: Cannot read property ‘setState’ of undefinedというエラーが発生してしまいます。

react

bind

bind することで、上記のエラーを回避します。

bindの詳細については、公式サイトでご確認ください。

定型文ですので、覚えてしまいましょう。

react

axios

dataInput を作成して、Jsonファイルへデータを送信する記述をします。

dataInput は、引数を受け取ります。
定数title を作成して、stateの値を保持させます。
axiosを使用して、Jsonファイルのpostsへ、title を送信します。

react

このままですと、データは保存されません。
bindをすると、データが保存されるようになります。

dataInput のbind を記述します。

react

これで、Jsonファイルへデータを送信して、保存するコードが完成しました。

ブラウザで確認

ブラウザのテキストボックスに、文字を入力して登録ボタンを押してみましょう。
次のように、前回作成したリストに、データが反映されます。

react

ブラウザのURLに、Jsonファイルのアドレスをペーストして、追加されたことも確認しましょう。
次のように追加されたことを確認できます。

id は自動で付与されます。

react

最後に今回作成しました register.js のコードを掲載します。

まとめ

今回はJsonファイルへaxiosでデータを送信して、保存する方法を紹介しました。
次回はJsonファイルのデータを削除する方法を書いていきます。
最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください