Reactを使ってTodoアプリを作ってみる_2日目

初めに

この記事はReact初心者が初めての自作アプリ作成を行う様子を書き残した日記です。

昨日はこれから作るアプリの部品を仮置きしてみて、イメージを固めるところまでやってみました。

今日はアプリの機能部分の実装に着手していこうと思います。

stateをAppコンポーネントに移譲する

個別のコンポーネントがいったん形になったので、コンポーネントの連携を行います。

まずはFormコンポーネントで管理しているstateをAppコンポーネントに移譲します。

Appコンポーネントで状態管理を行うことで、アプリ全体の状態を各コンポーネントに共有できるようにします。

src/App.js

import React from 'react';
import Form from './Form';
import TodoList from './TodoList'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: ''}

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    this.setState({value: event.target.value})
  }

  render() {
    return (
      <React.Fragment>
        <h1>Todo App</h1>
        <Form value={this.value} handleChange={this.handleChange} />
        <TodoList/>
      </React.Fragment>
    );
  }
}

export default App;

src/Form.js

import React from 'react'

class Form extends React.Component {
    render() {
        return (
            <React.Fragment>
                <label>
                    todo:
                    <input type="text" className="todoform" value={this.props.value} onChange={this.props.handleChange} />
                    <input type="submit" value="Add" />
                </label>
            </React.Fragment>
        );
    }
}

export default Form;

タスク追加機能を実装する

このアプリではAddボタンが押された時にタスクを追加します。
その機能を実現するため、Addボタンのクリックを検知するイベントリスナーhandleClickを定義しましょう。

handleClickメソッド

handleClickはボタンが押された時、次の処理を実行します。

• リストに新しいタスクを追加する
• フォームに入力された値をクリアする

リストに追加する処理を実現するため、stateにtodosを追加します。
todosはタスクのリストを管理する配列で、ボタンがクリックされた時にフォームの値をこの配列に追加するようにします。

そしてhandleClickでstateの各値を更新することで、上の2つの処理を実現させます。

これまでの話を取り込んだ結果が以下のコードとなります。

src/App.js

import React from 'react';
import Form from './Form';
import TodoList from './TodoList'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: '' ,todos: []}

    this.handleChange = this.handleChange.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }

  handleChange(event) {
    this.setState({value: event.target.value})
  }

  handleClick() {
    const newTodo = this.state.todos.slice()
    newTodo.push(this.state.value)
    this.setState({value: '', todos: newTodo})
  }

  render() {
    return (
      <React.Fragment>
        <h1>Todo App</h1>
        <Form value={this.state.value} handleChange={this.handleChange} handleClick={this.handleClick} />
        <TodoList/>
      </React.Fragment>
    );
  }
}

export default App;

import React from 'react'

class Form extends React.Component {
    render() {
        return (
            <React.Fragment>
                <label>
                    todo:
                    <input type="text" className="todoform" value={this.props.value} onChange={this.props.handleChange} />
                    <input type="submit" value="Add" onClick={this.props.handleClick} />
                </label>
            </React.Fragment>
        );
    }
}

export default Form;

まとめ

これでFormコンポーネント、Appコンポーネントでタスク登録機能を実装する準備が整いました。

明日はTodoListコンポーネントを修正し、登録されたタスクが表示されるようにしようと思います。