用React实现简单的TodoList（一）

准备工作

需要额外引入的插件：antd，redux

 

本篇先做：

文件划分 + 实现简单antd样式；

 

 

 

 

文件划分

 

TodoList.css：

一些基本样式。

 

actionCreator.js：

专门用于存放一些创建action的函数。将action的创建从组件文件中拆分出来，便于管理action。

 

actionTypes.js：

存放不同action的不同type。每个action的type最好用一个变量的形式表示，而不是字符串。当因为字母敲错了而出错时，如果使用的是变量，很容易就能在报错框找到出错点，而使用字符串时报错是无法准确定位到出错点的。

 

index.js：

（store目录下）用reducer创建基础store。

必要基础内容：

import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

 

reducer.js：

state的初始化、接受并处理action、返回一个符合修改要求的新state，它的工作机制并不允许直接修改state。

必要基础内容：

//设定初始state
const defaultState = {
    inputValue: '',
    list: []
}

//export一个必要函数 用于返回state 以及接收并处理action
export default (state = defaultState, action) => {
    
    /*这里可以写对action的验证处理操作*/

    return state;
}

 

index.js：

（基本目录下）使用TodoList，将TodoList组件挂载到页面上。

必要基础内容：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

//挂在到页面上id为root的标签内
ReactDOM.render(<TodoList />, document.getElementById('root'));

 

TodoList.js：

负责存放页面操作函数，逻辑部分实现。并且通过属性传值，把TodoListUI里会用到的函数、变量等，用标签的属性传递过去。

几个必要函数及其对应action：

inputChanged() + inputAction：实现输入与页面数据state的同步更新

addItem() + addAction：实现向list里添加Todoitem

deleteItem() + deleteAction：实现从list里删除某个Todoitem项

storeChanged()：改变内容

必要基础内容：

import React, { Component } from 'react';
import TodoListUI from './TodoListUI';
import store from './store/index';


class TodoList extends Component {
    constructor(props) {
        super(props);

        //从store获取数据
        this.state = store.getState();

        //函数绑定
        this.inputChanged = this.inputChanged.bind(this);
        this.storeChanged = this.storeChanged.bind(this);
        this.addItem = this.addItem.bind(this);
        this.deleteItem = this.deleteItem.bind(this);

        //每次state发生变化就会执行括号内的函数
        store.subscribe(this.storeChanged);
    }

    render() {
        
        //调用UI组件
        return (
            //父组件向子组件传值
            //把TodoListUI里会用到的函数 变量等 用标签的属性传递过去
            <TodoListUI 
                inputValue={this.state.inputValue}
                list={this.state.list}
                inputChanged={this.inputChanged}
                addItem={this.addItem}
                deleteItem={this.deleteItem}
            />
        )
    }

    inputChanged(e) {
        //实现输入与数据state的同步更新
        const action = inputAction(e.target.value);
        store.dispatch(action);
    }
    addItem() {
        //实现向list里添加Todoitem
        const action = addAction(this.state.inputValue);
        store.dispatch(action);
    }
    deleteItem(index) {
        //实现list里Todoitem项的删除
        const action = deleteAction(index);
        store.dispatch(action);
    }
    storeChanged() {
        this.setState(store.getState());
    }
}

export default TodoList;

 

TodoListUI.js：

TodoList中负责页面渲染的部分，本质就是TodoList.js文件中render函数的内容拆分出来，只负责页面渲染。

通过props.xx调用从TodoList里传来的函数、变量等。

 

 

 

 

 

实现简单的antd样式

会在页面上渲染的内容写在TodoListUI.js文件内，实现方法是返回一个组件TodoListUI，然后在TodoList.js这个主文件里调用TodoListUI组件。

1. 要使用antd样式，首先要在TodoListUI.js里引入必要文件：

（antd的具体使用方法可以在官方文档里查看）

import React, { Fragment } from 'react';
import 'antd/dist/antd.css';

//使用antd里的input button list来使用其样式
import { Input, Button, List } from 'antd';
import './css/TodoList.css';

 

2. 定义TodoListUI组件，这是一种简化的定义，因为只用负责渲染页面，相当于只需使用一个组件中的render()部分，所以无需定义一个完整组件，只用把它当作一个函数来定义，实现render()功能即可。

因为后期会在标签上加大量属性内容，所以采用分行写的方式。

const TodoListUI = (props) => {
    return (
        <Fragment>
            <div>
                <Input 
                    placeholder='add info'
                />
                <Button 
                    type="primary"
                >Add</Button>
            </div>
            <div>
                <!--这里写list-->
            </div>
        </Fragment>
    )
}

list用antd来写

<List
    bordered
    dataSource={props.list}
    renderItem={(item, index) => {
        return (
            <List.Item>
                {item}
            </List.Item>
        )
    }}
/>

 

3. 在TodoList.css里稍微写一些样式

.ant-input{
    width: 400px;
    margin: 10px;
}

.ant-list{
    width: 400px;
    margin: 10px;
}

基本工作完成