Create機能の実装

Create機能の仕様

今回，実装するタスク管理アプリケーションは次のものを記録するとします．

• タスク名
• タスクの詳細
• 期限

Create機能の実装

コードを以下に示します．

import React from 'react';
import firebase from './Firebase/firebase';
import { SHOW } from '../constants/routes';

class Create extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            detail: '',
            deadline: '',
        }
        this.ref = firebase.database().ref('tasks');
        this.handleChange = this.handleChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    onSubmit() {
        const { title, detail, deadline } = this.state;
        this.ref.push().set({
            title,
            detail,
            deadline
        }).then(() => {
            this.setState({
                title: '',
                detail: '',
                deadline: '',
            });
            this.props.history.push(SHOW);
        }).catch(error => {
            console.log("Error: ", error);
        })
    }
    render() {
        return (
            <div>
                <h4>タスク作成</h4>
                <form>
                    <table>
                        <tbody>
                            <tr>
                                <td>タイトル：</td>
                                <td><input type="text" name="title" onChange={this.handleChange}></input></td>
                            </tr>
                            <tr>
                                <td>タスク名：</td>
                                <td><input type="text" name="detail" onChange={this.handleChange}></input></td>
                            </tr>
                            <tr>
                                <td>期限：</td>
                                <td><input type="date" name="deadline" onChange={this.handleChange}></input></td>
                            </tr>
                        </tbody>
                    </table>
                </form>
                <button type="submit" onClick={this.onSubmit} >タスク作成</button>
            </div>
        )
    }
}
export default Create;