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


React使ってSPAを作るよ目次

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

今回はちょっと大掛かりですが、コメント送信フォームとリストの表示をしたいと思います。

送信用のAPIはいつもどおり作ってもらいました。
まずはこれを$.ajaxで送信するためのフォームコンポーネントを作ります。

React使ってSPAを作るよ(17)でやったのと同じように、articleBoolというフラグを立てて、loadArticleFromServer()が実行されるようにしています。
fetchURL()に判定を追記しておきました。

・・・なんかもうちょっときれいにまとめて書けそうな気もしますが、処理の違いがわかりやすいようにこのままにしときます。

再レンダリングしたあとは、忘れずにフラグをfalseに戻しておきます。

すでに投稿されたコメントは「/api/article」で返ってくる記事リストの中に含まれることになります。
React使ってSPAを作るよ(6)で最初につくったJSONのこの部分ですね。

モックの時にはなかったのですが、投稿したユーザー名と日時くらいは出しておきたいな、と思ったので、ここに投稿日時のdateを追加して、コンポーネントは以下のようにしました。

さきほどのコメントフォームとあわせてArticleListの中で呼び出しましょう。
ログインしていないユーザーは投稿できないので、loggedinにユーザーIDが入っているときだけフォームを表示します。

こんな感じになりました!

Reactでtextareaの複数行テキストをリストにする

さてこのコメントリストですが、みなさんだいたい困っているようです。

DBに入れるときに変換しても、Reactの実態はJSなので<br />がそのまま表示されてしまいますし、何もしなければ改行されずにテキストノード1個分の謎の空白ができて1行に繋がってしまいます。
だからみんな、mapを使って改行コードごとに要素を区切って表現しているんですね。
しかしこれ、HTML大好きな人間には苦しいですね。

でも大丈夫。
たった1行のCSSが解決してくれます。

半角スペース・タブ・改行をそのまま表示してくれる指定です。

かんたーんヾ(*´∀`*)ノ

React使ってSPAを作るよ目次