你的第一个React App (二 ) - 应用组件开发

接上文，Todo应用，核心功能包含添加Todo任务、待完成Todo任务列表、已完成Todo任务列表等功能。React项目中，src目录下的App.js文件是项目的入口文件，你可以把所有程序，都编写于此也可。当然，实际项目开发中，并不会这样做。话不多说，书归正文。下图就是我们最终要完成的应用。

要实现的应用，分为标题、添加任务、任务列表、已完成任务列表四个部分。我们需要使用React开发四个组件，然后将其组合在一起，最终实现上图中的应用。

首先，在src目录下新建四个js脚本文件，它们分别为TodoBanner.js、TodoCreator.js、TodoRow.js、VisibilityControl.js。这四个文件相当于Todo应用的四个组件。React框架的特点之一就是它的组件化。也就是说，我们可以理解为Todo是由四块不同形状和功能的积木组成。四个组件就如同四块积木，我们将其拼到一起，就组成了我们的Todo应用。

接下来我们先从第一个组件TodoBanner.js开始编写。这是Todo应用的标题组件，详细代码如下:

import React, { Component } from 'react';

export class TodoBanner extends Component {
    render = () =>
        <h4 className="bg-primary text-white text-center p-2">
            {this.props.name}'s To Do List
            ({this.props.tasks.filter(t => !t.done).length} items to do)
        </h4>
}

上述组件的功能是用来展示应用的标题，还有Todo任务的数量。

接下来的组件是添加Todo任务的组件，TodoCreator.js组件的具体代码程序如下：

import React, { Component } from 'react';

export class TodoCreator extends Component {
    constructor(props) {
        super(props)
        this.state = { newItemText: "" }
    }

    updateNewTextValue = (event) => {
        this.setState({ newItemText: event.target.value })
    }

    createNewTodo = () => {
        this.props.callback(this.state.newItemText)
        this.setState({ newItemText: "" })
    }

    render = () =>
        <div className="my-1">
            <input className="form-control" value={this.state.newItemText}
                onChange={this.updateNewTextValue} />
            <button className="btn btn-primary mt-1"
                onClick={this.createNewTodo}>Add</button>
        </div>
}

这是一个用于添加Todo任务的组件，属于应用的第二个组件。

Todo任务添加后，需要一个展示的地方，下面这个组件，就是用来显示新添加的任务的组件。新建一个TodoRow.js文件，然后编写如下程序：

import React, { Component } from 'react'

export class TodoRow extends Component {

    render = () =>

        <tr>
            <td>{this.props.item.action}</td>
            <td>
                <input type="checkbox" checked={this.props.item.done} onChange={() => this.props.callback(this.props.item)}></input>
            </td>
        </tr>
}

当我们在新添加的任务列表中，勾选完成任务后，被完成的任务会从列表中移除。移除的任务，我们也需要展示出来。那么下面的这个组件就是用来，做这件事情的。新建一个VisibilityControl.js文件，编写如下代码程序：

import React, { Component } from 'react';

export class VisibilityControl extends Component {
    render = () => <div>
        <input className="form-check-input" type="checkbox" checked={this.props.isChecked} onChange={(e) => this.props.callback(e.target.checked)}></input>
        <label className="form-check-label">
            Show {this.props.description}
        </label>
    </div>
}

完成上述四个组件的程序开发后，我们需要使用它们，把它们组合在一起，最终完成Todo应用。关于如何组合实现，我们下次再见。