阅读 175

【小白入门】React实现TodoList简易教程(下)

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

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

创建父组件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其他重要模块的文章,敬请关注!

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

文章分类
前端
文章标签