蚂蚁金服dva框架的使用说明（二）

上一期末尾，我准备使用dva框架制作一个简单的todolist，由于最近比较忙所以拖更了。言归正传，我们来讲一讲这个todolist怎么做。

思路分析

所谓todolist，即用户将值输入到输入框（即input标签）内，然后点击按钮，之后将输入值显示在页面上。因此这个小程序在react下能够被拆分为3个组件，即输入框、按钮、输入值列表。
这样一来我们的思路就很清晰，目的也非常明确了，首先在routes层创建TodoList文件夹（一个功能页面单独写在一个文件夹内，这是个好习惯），建两个文件，index.js和List.js，用于存放三个组件。index内存放输入框和按钮，List内存放列表。

我们今天先把简单的功能先做出来，因此暂时只涉及dva的routes层文件

代码实现

在实际开发中输入框、按钮等组件通常会用到第三方插件来制作，省时省力。这里我用到了蚂蚁金服的antd插件，能够快速编写UI组件。打开终端进入项目文件夹，输入以下命令

$ npm install antd --save

这样我们的antd就导入完成了，实际使用时导入需要的插件即可。

Input和Buttom组件

import React, { Component } from 'react'
import { Input, Button } from 'antd'
import styles from './index.less'
import ValueList from './List'

class TodoList extends Component {

    state = {
        inputValue: '',
        todoList: []
    }

    render() {

        const handleChange = e => {
            this.setState({
                inputValue: e.target.value
            });
        };

        const handleClick = () => {
            if ( !this.state.inputValue.trim() )
                alert("输入值不能为空！");
            else
                this.state.todoList.push(this.state.inputValue);
            this.setState({
                inputValue: ''
            });
        };

        return(
            <div>
                <Input 
                    className={styles.input} 
                    onChange={handleChange}
                />
                <Button type="primary" onClick={handleClick}>添加</Button>
            <ValueList inputList={this.state.todoList} />
        </div>
        )        
    }
}

export default TodoList

在react中需要刷新UI动态显示的变量一般存放在state内，此时state相当于react内部一个小型的数据库。首先将Input组件的输入值用onChange方法进行监听，在handleChange中取到传入参数e，此时我们的输入值即为e.target.value，因为每次执行操作，render内代码会动态刷新，因此要将数据存入state中。在state中初始化变量inputValue和todoList，之后点击按钮时将输入值存入数组todoList中，即在按钮的onClick事件中执行这步操作。这样我们输入框和按钮就设置完成了，接下来把值在页面中显示出来就行了。

List组件

接下来就轮到我们的输入值列表登场了。刚才我们已经将输入的值存入了todoList变量中。此时我们创建新的ValueList页面，通过react的父子组件传值方法，将state中的todoList传入ValueList中，并取名为inputList。这是List页面的代码

import React from 'react'
import { List } from 'antd'

const ListItem = List.Item

const ValueList = ({
    inputList
}) => {

    return (
        <div>
            <List 
                bordered
                dataSource={inputList}
                renderItem={item => (
                    <ListItem>{item}</ListItem>
                )}
            />
        </div>
    )
}

export default ValueList

这里我使用了无状态组件，因为List中的值由父组件传入，本身不需要在加载组件时进行别的操作，因此使用无状态组件能够提高页面的性能。上面我们将inputList变量传了过来，传入的变量是存放在子组件的props中的，因此在组件的形参中用(props)的形式接收即可。之后使用antd的List组件将inputValue的值显示出来就大功告成了。具体antd中组件的用法参考链接: https://ant.design/index-cn，这里就不一一赘述了。完成后的页面如下

今天就先讲到这，我们todolist的功能现在还不完全，只能增加数据，后续会给页面添加删除、修改等功能，并且也会用到dva框架model、services层的功能尝试与后台进行通信，敬请期待。