[React] noteっぽいアプリを作る。その１

Reactはじめたので、noteっぽい文章を投稿できるアプリ作ってみたいと思います🎉

今日は
・タイトルと本文を入力して一覧に表示する
を作りたいと思います。

例の如くnote.jsというファイルでNoteクラスを作っておきます。

import React, { Component } from 'react';
export default class Note extends Component {
}

タイトルと本文が必要なので、render()に入力フィールド2つと投稿ボタンを用意します。

import React, { Component } from 'react';
export default class Note extends Component {
 render() {
   return (<div>
     <input type="text" placeholder="記事タイトル" />
     <textarea placeholder="ご自由にお書きください。" />
     <button>投稿</button>
   </div>);
 }
}

今こんな感じです( ◠‿◠ )

入力したタイトルと本文をstateに保持するようにします。

import React, { Component } from 'react';
export default class Note extends Component {
   constructor(props) {
       super(props);
       this.state = {
           title: '',
           body: ''
       };
   }
   onTitleChange = (e) => {
       this.setState({
           title: e.target.value
       });
   }
   onBodyChange = (e) => {
       this.setState({
           title: e.target.value
       });
   }
   render() {
       return (<div>
       <input type="text" placeholder="記事タイトル" onChange={ this.onTitleChange } />
       <textarea placeholder="ご自由にお書きください。" onChange={ this.onBodyChange } />
       <button>投稿</button>
       </div>);
   }
}

ポイント
・setStateを使ってstateに保存しています。
・stateに保存するイベントを、入力フィールドのonChangeに設定します。

次に、投稿ボタンをクリックしたときに記事の内容を保存する処理を作ります。

import React, { Component } from 'react';
export default class Note extends Component {
   constructor(props) {
       super(props);
       this.state = {
           notes: [],
           ...
       };
   }
   
   ...
   
   addNote = () => {
       const { notes, title, body } = this.state;
       this.setState({
           notes: [...notes, {title: title, body: body}]
       });
   }
   render() {
       const { notes } = this.state;
       return (<div>
           ...
           <button onClick={ this.addNote }>投稿</button>
           <ul>
               {notes.map((note, index) => <li key={index}><strong>{note.title}</strong><p>{note.body}</p></li>)}
           </ul>

       </div>);
   }
}

ポイント
・投稿ボタンがクリックされた時のイベントaddNoteを作ります。
・addNoteのイベントではstateに追加していたtitleとbodyをnotesという名前の配列に追加します。
その際に、titleとbodyはハッシュにして追加するようにします。
・renderに<ul>と<li>を追加し、リストでtitleとbodyを表示できるようにします。

こんな感じになりました( ◠‿◠ )

↓記事を入力して投稿

↓さらに投稿

リストの末尾に記事が追加されていきます🎉

UIもっといい感じにしたいところですね😅