Reactを使ってTodoアプリを作ってみる_3日目
初めに
この記事はReact初心者が初めての自作アプリ作成を行う様子を書き残した日記です。
前回はFormコンポーネントを作成し、タスク登録機能を実装しました。
今回は登録されたタスクを表示する機能の実装に着手します。
タスク表示機能
登録したタスクを表示する機能はTodoListコンポーネントが担当します。
前回、Formコンポーネントのstateに登録されたタスクを保存するようにしました。
今回はその情報をpropsを通じてTodoListコンポーネント渡すようにします。
タスク追加機能の実装は以下となります。
TodoListコンポーネントの引数にtodosを追加し、タスク一覧の情報を渡してTodoListコンポーネント側に渡す流れになります。
src/App.js コンポーネント呼び出し部分
<React.Fragment> <h1>Todo App</h1> <Form value={this.state.value} handleChange={this.handleChange} handleClick={this.handleClick} /> <TodoList/> <TodoList todos={this.state.todos} /> </React.Fragment>
src/TodoList.js
render() {
return (
<ul>
{this.props.todos.map(
(todo) => <li>{todo}</li>
)}
</ul>
);
}
タスク一覧の表示にはJavaScripのmapメソッドを使用しています。
mapメソッドは引数に処理を渡すと、配列のすべての要素にその処理を実行し、その結果から得られた新しい配列を生成します。
つまり以下の処理はtodosという配列から1つ要素を取りしてtodoに格納し、そのtodoに<li>タグを追加する、という処理を配列の1つ1つの要素に対して実行する処理となります。
this.props.todos.map((todo) => <li>{todo}</li>)
これでタスクがリスト化されて画面に表示されるようになりました。
タスク削除機能
次は登録されたタスクを削除する機能を追加します。
タスクの隣にDeleteボタンを追加し、そのボタンが押されるとそれに紐づくタスクが削除される、という処理を実装します。
さて、その機能を実装したソースは以下の通りとなります。
src/TodoList.js
import React from 'react'
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.todos.map(
(todo, i) => <li key={i}><input type="checkbox" />{todo}<button onClick={() => this.props.handleDeleteClick(i)}>Delete</button>
</li>
)}
</ul>
);
}
}
export default TodoList;
src/App.js handleDeleteClickメソッド
handleDeleteClick = (index) => { const newTodo = this.state.todos.slice() newTodo.splice(index,1) this.setState({todos: newTodo}) }
src/App.js renderメソッド
render() {
return (
<React.Fragment>
<h1>Todo App</h1>
<Form value={this.state.value} handleChange={this.handleChange} handleClick={this.handleClick} />
<TodoList todos={this.state.todos} />
<Form value={this.state.value} handleChange={this.handleChange} handleAddClick={this.handleAddClick} />
<TodoList todos={this.state.todos} handleDeleteClick={this.handleDeleteClick} />
</React.Fragment>
);
}
handleDeleteClickメソッド
handleDeleteClickメソッドはDeleteボタンがクリックされた時の動作を定義したメソッドです。
これをpropsを通じてTodoListコンポーネントに渡すことで、Appコンポーネントで定義したメソッドをTodoListコンポーネント側で使うことができます。
渡されたhandleDeleteClickAppメソッドはAppコンポーネントのstateを参照するので、Appコンポーネントで管理しているstateの情報から対象の情報を削除する、といった処理が実現可能になります。
Key
また、クリックされた要素を特定するため、ReactのKeyという機能を使用しています。
Keyはどの要素が変更、追加、もしくは削除されたのかをReactが識別できるようにする機能です。
要素にkeyというキーワードを与えることで、その要素を一意に特定できるような情報を付与することができます。
this.props.todos.map((todo, i) => <li key={i}><input type="checkbox" />{todo}<button onClick={() => this.props.handleDeleteClick(i)}>Delete</button></li>)
今回はDeleteボタンが押されたのがどの要素なのか特定できるようにする必要があるため、mapによって出力された要素に降順の番号を付与しています。
Deleteボタンが押されたとき、handleDeleteClickメソッドにその番号を渡すことで配列内のどの要素を消すのか指定するような仕組みとなっています。
おわりに
今回はこれまでより複雑なロジックになってきました。 登録機能、削除機能を実装するために活用した以下のメソッド、機能をキチンと押さえておこうと思います。
- JavaScriptのmapメソッド
- ReactのKey
おまけ：ハマりポイント
実は削除機能を実装するにあたって長い間ハマっていたところがあるので、自戒の念を込めて書き残しておきます。
イベントハンドラに引数付きのメソッドを追加する
handleDeleteClickメソッドをonClickイベントに登録する時、以下のように書くと予期せぬ挙動を取りました。
src/TodoList.js
<button onClick={this.props.handleDeleteClick(i)}>Delete</button>
タスクが追加されたタイミングでhandleDeleteClickメソッドが呼ばれ、登録されたタスクが即座に消える、というバグが発生したのです。
このバグの原因ですが、this.props.handleDeleteClick(i)という箇所がメソッドの登録ではなく、メソッドの実行としてReactに認識されているためです。
handleDeleteClickメソッドは引数を必要とするメソッドなので、handleDeleteClick(i)と書いたのですが、ここのカッコによりメソッドの実行であると判断されてしまったようです。
そのためタスクが描画された時にhandleDeleteClickメソッドが実行されるというバグが発生してしまいました。
引数付きのメソッドをイベントハンドラに登録したいのであれば、メソッドの登録だと明示的にしてあげましょう。
その方法の1つがアロー関数による無名関数の定義です。
<button onClick={() => this.props.handleDeleteClick(i)}>Delete</button>
これによりthis.props.handleDeleteClick(i)というメソッドが無名の関数定義として処理され、正しくイベントハンドラに登録されるようになります。
