【小白入门】React实现TodoList简易教程（下）接上篇(【小白入门】React实现TodoList简易教程（下）

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

创建父组件ToDoList

新建ToDoList.js文件，编写如下代码，搭好一个组件的基本框架：

//导入React相关依赖
import React, {Component, Fragment} from "react";

//创建一个组件
class Todolist extends Component {
    //构造函数
    constructor(props){
        super(props);  
        //this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
        this.state = {
            //this.state里可以写一些初始化的数据
            value:  '',
            list: [],
        }
        // 重新指向所在类
        this.handleClick = this.handleClick.bind(this); 
        this.handleChange = this.handleChange.bind(this);
    }
    // 点击新增事件
      handleClick() {
        this.setState({
          list: [...this.state.list, this.state.value],
          value:  ''
        })
      }
      // 监听输入框
      handleChange(e) {
        this.setState({
          value: e.target.value
        })
      }
      
    //render渲染虚拟DOM
    render(){
        return(
            <Fragment> 
                <div className="input-box"> 
                    <input placeholder="任务" value={this.state.value} onChange={this.handleChange} /> 
                    <button className="btn-add" onClick={this.handleClick}>新增</button> 
                 </div> 
                <ul className="list-box "> 
                { 
                    this.state.list.map((item) => { 
                    return <li>{this.getItemList()}</li> 
                    }) 
                } 
                </ul> 
            </Fragment>
        );
    }
}

//输出组件,使得该组件可以被其他组件调用
export default ToDoList;

组件中每个部分的功能， 在注释里有简略描述。一个基本的组件一般包括以上的几个部分：

import导入的依赖;
组件定义（class XXX extends React,Component）;
构造函数constructor：当我们使用组件的时候，constructor构造函数是优于其他任何函数，会自动的，最先的被执行；
render函数：渲染虚拟DOM；
export输出组件。

添加任务功能， 主要分为监听input输入值,点击按钮触发添加任务函数，将输入值添加到任务列表中。

创建子组件ToDoitem

任务列表作为一个整体模块，可以定义一个组件，通过props的传值实现和父组件的数据传递。具体代码如下：

class Todoitem extends React.Component {
    constructor(props) {
        super(props)
        this.handleDeleteItem = this.handleDeleteItem.bind(this)
    }
    // 子组件想要父组件的值，需要调用父组件的方法
    // 父组件向子组件传值，需要父组件中定义属性，子组件获取属性
    handleDeleteItem() {
        this.props.delete(this.props.index)
    }
    render () {
        if(this.props.content) {
            return (
                <li>
                    <span>{this.props.content}</span>
                    <span className="btn-delete" onClick={this.handleDeleteItem}>删除</span>
                </li>
            )
        }
        else {
            return (
                <li>暂时没有</li>
            )
        }
        
    }
}

涉及知识点：

1. 父组件传值子组件

在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.content获取到这个content的值。

父组件向子组件传值，通过props，将父组件的state传递给了子组件。

父组件中可以用定义一个函数的方法引用子组件。

getItemList() {
    if (this.state.list.length > 0) {
      return (
        this.state.list.map((item, index) => {
          return (
            <Todoitem 
            delete={this.handleDeleteItem} 
            key={index} 
            content={item} 
            index={index}
            />
          ) 
        })
      )
    } else {
      return (
       <li>暂时没有呢</li>
      )
    }
  }

2. 子组件传值父组件

子组件通过调用父组件传递到子组件的方法向父组件传递消息的。例如上述的删除功能,父组件中只需定义方法，子组件通过props进行调用

// 父组件中的点击删除事件
  handleDeleteItem(index) {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list: list 
    })
  }

总结

上述就是简单使用React实现TodoList简易教程，只是讲述了React的语法，以及简单的父子之间的通讯，作为小白入门的必备。React包含的知识点还有很多很多，想要系统的学习，还是跟着官网的教程去一点点学习。后续还会更新React其他重要模块的文章，敬请关注！

创作不易，点赞鼓励~~~