react

React使ってSPAを作るよ(19)


React使ってSPAを作るよ目次

React使ってSPAを作るよ(18)の続きです。

今回は記事を削除するボタンの実装をします!

ユーザー認証ができたら、「自分が投稿した記事だけ削除できる」ようにしたいですが、まずは記事に削除ボタンをつけて、該当する記事を削除する部分の処理だけ追加します。

まずはボタンのコンポーネントです。
これは簡単ですね。

ボタンをクリックしたらhandleDelete()が実行されるようにします。

今回も同僚がDELETEメソッドで記事を削除できるようにしておいてくれてるので、そのAPIを叩くように実装します。
ということは、type: ‘delete’に変更する必要がありますね。
それから、JSONデータを扱うわけではないのでdata: ‘json’も消してしまいます。

handleDelete()の中に、記事の取得やタグの取得で今まで使ってきた$.ajaxの処理を追加しましょう。

jQueryの記述が混ざっていてアレですが、まあやりたいことはわかると思います。

成功したときにリストを更新したいので、tmpURL = ”;とすることで、fetchURL()が反応するようにします。
fetchURL()はどこで出てくるのかというと過去の記事、React使ってSPAを作るよ(17)を参考にしてください。

あとはこのボタンを記事コンポーネントに配置するんですが・・・

これだと、いつでも誰でもボタンが表示されてしまいます。
認証部分が実装できたら、その判定によって表示・非表示を切り替えたいですね。
前回ヘッダの要素を出し分けるためにif文を使ったので、これと同じように変数testがtrueのときは表示、falseのときはコンポーネント自体を呼ばないようにしておきます。

実装してみた結果がこちらです。

react

ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です