React 编写TodoList功能

一、TodoList实现列表添加删除功能

添加webpack命令: yarn add webpack

创建components 目录及TodoList.js

pages 目录创建 show用来渲染TodoList组件

TodoList.js 代码

import React,{ Component } from 'react';
//Fragment 隐藏外层标签
class TodoList extends Component{
  //调用父类Component的构造函数,固定写法。
  constructor(props){
    super(props);
    //创建数据
    this.state={
      inputValue:'hello',
      list:['学习React','学习前端']
    }
  }
  render() {
    return (
      

        {/*jsx语法，有提示。bind 改变this指向为调用的函数 */}
        
        提交
        

          {
            // 循环输出list
            this.state.list.map((item,index)=>{
              return (
                

                  {item}
                
              )
            })
          }
        
      

    )
  }

  handleInputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  //添加
  handleBtnClick(){
    this.setState({
      //展开运算符，拿到以前数组的内容，生成新的数组。
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  //删除 index为下标
  handleItemDelete(index){
    const list=[...this.state.list];
    //删除一个下标为index的值
    list.splice(index,1);
    this.setState({
      list:list
    })
  }
}
export default  TodoList;

show.js 代码

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




export default function() {

  return (
    

    
    
  );
}

测试

点击按钮可以增加，点击文字可以删除。

二、拆分组件修改功能

创建 TodoItem.js 通过this.props.content获取父组件传递的内容

import React,{ Component } from 'react';

class TodoItem extends Component{
constructor(props){
  super(props);
  this.handleClick=this.handleClick.bind(this);
}
  render() {
    return (
      

        {this.props.content}
      

    )
  }
  handleClick(){
    this.props.deleteItem(this.props.index)
  }
}
export default  TodoItem;

TodoList.js 引入子组件

import React,{ Component } from 'react';
import TodoItem from "@/components/TodoItem";
//Fragment 隐藏外层标签
class TodoList extends Component{
  //调用父类Component的构造函数,固定写法。
  constructor(props){
    super(props);
    //创建数据
    this.state={
      inputValue:'hello',
      list:['学习React','学习前端']
    }
  }
  render() {
    return (
      

        {/*jsx语法，有提示。bind 改变this指向为调用的函数 */}
        
        提交
        

          {
            // 循环输出list
            this.state.list.map((item,index)=>{
              return (
                

                  {/*组件内容传递*/}
                    
                  {/*
*/}
                  {/*{item}*/}
                  {/*
*/}
                

              )
            })
          }
        
      

    )
  }

  handleInputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  //添加
  handleBtnClick(){
    this.setState({
      //展开运算符，拿到以前数组的内容，生成新的数组。
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  //删除 index为下标
  handleItemDelete(index){
    const list=[...this.state.list];
    //删除一个下标为index的值
    list.splice(index,1);
    this.setState({
      list:list
    })
  }
}
export default  TodoList;