React学习笔记实战１：todo列表

对慕课网上的付费教程：React.js入门与实战中的todolist一章的源码分析．

Part 1 :达到目标

一个输入框，在其中输入内容后回车，其中的内容会显示在输入框下面：

点击对应的内容会消失．

Part 2：分析

首先，这里有两部分组成，第一，输入框，第二，展示区域，所以分别分为两个组件：Input.jsx和List.jsx．按照教程上讲，这两个就是木偶组件，即只负责数据的传递与展示．在这之上还有另一个整合这两个组件的智能组件，负责数据的处理Todo.jsx．

Todo.jsx

这里首先思考一个问题，我们操作的数据，即用户输入完成后保存在List.jsx中的数据保存在哪里？保存在List.jsx中吗？不能，因为这部分数据与Input.jsx中有关，当Input.jsx中需要传入新的值时，需要重新进行输出．那保存在Input.jsx中可以吗？可以，那么List.jsx还有什么存在的意义吗？所以，当涉及到两个组件的公共数据时，都是保存在调用这两个组件的父组件上的．即Todo.jsx中的．

import React from 'react'
impoer Input from 'Input'
import List from 'List'

class Todo extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state={
            // 保存Input.jsx和List.jsx的公共值
            todos:[]
        }
    }
    render(){
        return(
            <div>
                <Input submitFn={this.submitFn.bind(this)}/>
                <List todos={this.state.todos} deleteFn={this.deleteFn.binf(this)}
            </div>
        )
    }
}

暂时就看这么多，可以看到在Todo.jsx中调用Input.jsx和List.jsx组件时，还向其中传递了两个函数对象参数：submitFn和deleteFn，并将数据this.state.todos作为参数传递到下层组件去．这里思考一下，传递的这几个参数作用是什么？

答案揭晓：

• submitFn：将用户最新的输入传递到this.state.todos中进行输出
• deleteFn：给List.jsx调用，来操作Todo.jsx中的this.state.todos
• todos：将数据传递给List.jsx进行输出．

submitFn

submitFn(value){
    // 获取 this.state.todos数组的下一个下标，当作id
    const id=this.state.todos.length;
    // 调用this.setState来修改this.state的值
    this.setState({
        // concat 的作用是连接两个数组，即旧的this.state.todos和{id:id,text:value}
        todos:this.state.todos.concat({
            id:id,
            text:value
        })
    })
}

注意，这里的submitFn等于是Todo.jsx中开放给Input.jsx操作父级组件中的this.state.todos的一个函数，一个函数，所以可以需要设置传入的参数value．

deleteFn

类似的，deleteFn就是Todo.jsx开放给List.jsx来删除父组件中的this.state.todos的值的．

deleteFn(id){
    let data=this.state.todos;
    this.setState({
        // ES６语法 ()=>{}
        // 这里表名，如果当前项的id与传入的id不相同，则返回真，否则返回false
        todos:data.filter(item=>{
            if(item.id!==id){
                return item
            }
        })
    });
}

Input.jsx

首先，输入值肯定是保存在state中的，并且需要为该输入框绑定onChange事件，并且我们需要实现，在输入完成后可以按Enter键将内容传递到List.jsx中进行输出．所以基本结构就是这样：

import React from 'react'

class Input extends React.Component{
    constructor(props,context){
        super(props,context);
        // 初始化 state，设置value来保存输入框输入
        this.state={
            value:""
        }
    }
    render(){
        return(
            <div>
                <input 
                    {/*绑定value的值*/}
                    value={this.state.value}
                    {/*绑定表单内容change事件*/}
                    onChange={this.changeHandler.bind(this)}
                    {/*绑定键盘单击事件*/}
                    onKeyUp={this.keyUpHandler.bind(this)}
            </div>
        )
    }
}

事件的命名规则一般是XXXHander

接下来重点就是绑定的这两个事件该怎么写了，changeHandler是简单的，就是将最新的输入值保存进this.state.value中：

changeHandler(event){
    this.setState({
        value:event.target.value
    });
}

这里的event参数的传入是依据ES5的标准，所以不需要在上面进行显式的指定．

接下来就是键盘单击事件了，这里需要实现的目标是当用户点击Enter键，并且输入框内数据不为空时，将数据传递到List.jsx中进行输出．具体实现就是需要父级Input.jsx中传入的函数对象参数：submitFn了，具体调用方式如下：

keyUpHandler(event){
    const value=this.state.value;
    // 当用户单击Enter键并且输入值不为空
    if(event.keyCode===13 && value.trim()){
        // 注意这里的调用方式：this.props
        this.props.submitFn(value);
        //　之后可以清空一下输入框，提升用户体验
        this.setState({value:""})
    }
}

这样就实现了，当用户输入完成后，正确的输入值会被保存在Input.jsx中的this.state.todos中了．

List.jsx

这一组件的作用其实就两个，第一，输出内容，第二，绑定单击事件，用于实现单击时删除功能．

import React from 'react'

class List extends React.Component{
    render(){
        // 获取从父级传入进来的参数
        var data=this.props.todos;
        // 根据传入参数进行输出
        return (
            <div>
                <ul>
                    {/*由于这里的输出跟父级的this.state.todos绑定了，所以在父级中修改this.state.todos就能自动实现自动重新输出了*/}
                    {data.map((item,index)=>{
                        return <li key={index} onClick={this.clickHandler.bind(this,item.id)}>{item.text}</li>
                    })}
                </ul>
            </div>
        )
    }
    // 创建删除函数，删除的功能通过调用父级的函数实现
    clickHandler(id){
        this.props.deleteFn(id);
    }
}

export default List

Part 3 总结

所谓智能组件和木偶组件，其中Todo.jsx在其中的作用就是智能组件，负责数据处理，输出控制，而List.jsx和Input.jsx则是木偶组件，仅负责采集数据，输出数据，调用智能组件提供的接口，将数据传回智能组件进行处理．