12.实现`完成`和`未完成`功能

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

1.校验数据类型
1.1.引用包src/components/TodoList/index.js

import PropTypes from 'prop-types';

1.2.数据校验src/components/TodoList/index.js

与render同级

    static propTypes = {
        /**
         * 1.todos必须是一个数组 PropTypes.arrayOf()
         * 2.对数组中的数据进行校验 PropTypes.shape({})
         */
       "todos": PropTypes.arrayOf(PropTypes.shape({
            "id":PropTypes.number.isRequired, // id 必填 数字类型
            "title":PropTypes.string.isRequired,// title 必填 字符串类型
            "isCompleted":PropTypes.bool.isRequired, // isCompleted 必填 布尔类型
        })).isRequired
    };

2.点击复选框当前状态改变为已完成或未完成
2.1.添加复选框添加选中状态及改变事件src/components/TodoList/index.js

    render() {
        return (
            <li>
                <span>
                    <input
                        type="checkbox"
                        checked={this.props.isCompleted}
                        onChange={this.handleCheckboxChange}
                    />
                    {this.props.title} {this.props.isCompleted ? "已完成" : "未完成"}
                </span>
            </li>
        );
    }

handleCheckboxChange=()=>{
  console.log("changed");
}

当前如果点击复选框，控制台可以打印出changed但页面没有改变

2.2.在祖级组件中添加数据修改事件src/App.js

    /**
     * @param id 当前选中的item项 
     */
    onCompletedChange=(id)=>{
        console.log("completedChange:");
        
    };

2.3.向下传递改变事件(onCompletedChange)src/App.js

    render() {
        return (
            <Fragment>
                <TodoHeader desc={this.state.desc}>{this.state.title}</TodoHeader>
                <TodoInput addTodos={this.addTodos} btnText='ADD'/>
                <TodoList onCompletedChange={this.onCompletedChange} todos={this.state.todos}/>  #update 修改
                <Like/>
            </Fragment>
        );
    }

2.4.子组件继续向下传递事件src/components/TodoList/index.js

    render() {
        console.log(this.props)
        return (
            <ul>
                {
                    this.props.todos.map(item => {
                        return (
                            <TodoItem
                                onCompletedChange={this.props.onCompletedChange}
                                key={item.id}
                                {...item}
                            />
                        )
                    })
                }
            </ul>
        );
    }

2.5.添加props校验src/components/TodoList/index.js

    static propTypes = {
        /**
         * 1.todos必须是一个数组 PropTypes.arrayOf()
         * 2.对数组中的数据进行校验 PropTypes.shape({})
         */
        todos:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.number.isRequired, // id 必填 数字类型
            title:PropTypes.string.isRequired,// title 必填 字符串类型
            isCompleted:PropTypes.bool.isRequired, // isCompleted 必填 布尔类型
        })).isRequired,
        onCompletedChange:PropTypes.func  //#insert 新增
    };

2.6.在TodoItem中调用函数src/components/TodoList/TodoItem/index.js

    handleCheckboxChange=()=>{
        // this.props.onCompletedChange&&this.props.onCompletedChange(this.props.id);//如果传递了参数则调用，否则不进行调用
        const {
            onCompletedChange=()=>{
                console.log("=============error start==============");
                console.log("如果没有传当前函数的情况下的默认值");
                console.log("es6解构");
                console.log("=============error end================");
            },
            id
        }=this.props;
        
        onCompletedChange(id);
    }

2.7.根据id修改数据

    /**
     * @param id 当前选中的item项
     */
    onCompletedChange=(id)=>{
        console.log("completedChange:");
        this.setState((prevState)=>{
            return {
                todos:prevState.todos.map(item=>{
                    if(item.id===id){
                        item.isCompleted=!item.isCompleted
                    }
                    return item;
                })
            }
        })
    };

推荐了解知识点 noop