React技巧5(TodoList实现)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04

2.React 技巧2(避免无意义的父节点)----2018.01.05

3.React 技巧3(如何优雅的渲染一个List)----2018.01.06

4.React 技巧4(如何处理List里面的Item)----2018.01.07

5.React 技巧5(TodoList实现)----2018.01.08

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

结合上面两节课,我们今天来写一个TodoList!

实现功能,添加,删除!

新建一个文件夹 demo

在改文件夹里新建两个组件

无状态组件 Index.jsx及状态组件TodoList.jsx

并再 Index.jsx 中引入 TodoList.jsx

Index.jsx

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

const Index = () =>
    <TodoList/>
;

export default Index;

TodoList.jsx

import React from 'react';

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                这是TodoList
            </div>
        );
    }
}

export default TodoList;

在  config -> entry -> entry.js 

{
    name: 'demo',
    path: 'demo/Index.jsx',
    title: '案例',
    keywords: '案例,xxx',
    description: '这是我们的案例'
}

然后执行 

npm run devNew

npm run dev

下面我们写下 UI 界面

<div className="todoList">
    <input type="text" ref="todoInput"/>
    <button>添加</button>
    <div className="list">

    </div>
</div>

新建 app -> public -> css -> todoLIst.pcss

.todoList {
  li {
    list-style-type: none;
    margin-top: 10px;
  }
  button {
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px 10px;
    margin-left: 10px;
  }
}

现在我们开始写逻辑

我们在this.state 对象里加上 list

this.state = {
    list: []
};

我们希望list数据结构是这样的

this.state = {
    list: [
        {
            id:1,
            title:'前端人人1',
            status:1,/*0 删除,1 正常*/
        },
        {
            id:2,
            title:'前端人人2',
            status:1,/*0 删除,1 正常*/
        }
    ]
};

那么我们 添加 事件 应该这样写:

handleAdd() {
    let item = this.refs['todoInput'].value;
    if (item) {
        let list = this.state.list;
        list.push({id: list.length + 1, title: item, status: 1});
        this.setState({list: list}, () => console.log(this.state.list))
    } else {
        alert('不能为空')
    }
}

加到按钮上

<button onClick={this.handleAdd}>添加</button>

这里没有绑定this

我们再构造函数里,绑定this,这是另一种绑定this 写法,

constructor(props) {
    super(props);
    this.state = {
        list: []
    };
    this.handleAdd = this.handleAdd.bind(this)
}

我运行浏览器,看是否能打印出.list

不错,完美打印出来了

下面我们,渲染list

<div className="list">
    {
        list.map(data => <li key={data.id}>{data.title}</li>)
    }
</div>

我们运行下浏览器,点击添加按钮

我们现在加上删除按钮

<button onClick={() => this.handleItemDel(data.id)}>删除</button>

handleItemDel(id) {
    let list = this.state.list;
    list.find(data => data.id === id).status = 0;
    this.setState({list: list})
}

当点击删除按钮时,我们把改项的status置成0

我们修改一下渲染list的逻辑,让每个项的status为1的显示(删除的不显示)

<div className="list">
    {
        list.map(data => {
            if (data.status === 1) {
                return (
                    <li key={data.id}>{data.title}
                        <button onClick={() => this.handleItemDel(data.id)}>删除</button>
                    </li>
                )
            }else{
                return false
            }
        })
    }
</div>

这段代码其实还可以再优化一下,更加简洁:

<div className="list">
    {
        list.map(data => [
            data.status === 1 ?
                <li key={data.id}>{data.title}
                    <button onClick={() => this.handleItemDel(data.id)}>删除</button>
                </li>
                :
                null
        ])
    }
</div>

看下浏览器

我们刚刚把 前端人人3 删除,删除的就不显示了!

ok!大功告成!

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

来源：React技巧5(TodoList实现)-留客客-获客营销saas系统