React 新手入门练习（todolist练习）

最新推荐文章于 2026-01-22 20:15:10 发布

原创最新推荐文章于 2026-01-22 20:15:10 发布 · 402 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

这篇博客介绍了如何使用React的Class组件构建一个TodoList应用。主要涉及添加、删除、全选/反选功能，以及状态管理。文章通过代码展示了一个简单的React应用实例，适合初学者理解React的基本工作原理。

import React, { Component } from "react";
import "./App.css";
import ItemHead from "./components/head/Index";
import FooterItem from "./components/footer/Index";
import MainItem from "./components/main/Index";
class App extends Component {
  constructor() {
    super();
    this.state = {
      List: [],
      Allchecked: false,
     
    };
    // console.log(this.state.Donenum,this.state.Allnum);
  }

  // 添加list
  Addinput(e) {
    // console.log(e);
    this.state.List.push(e);
    console.log(this.state.List);
    this.setState({
      List: this.state.List,
      Allchecked: false,
    });
  }
  // 全选反选
  ChangeCheck(id, status, isall) {
    console.log("App改变单选框事件", id, status, isall);
    if (isall) {
      this.state.List.forEach(item=>{
        item.status=status
      })
      this.state.Allchecked=status
    } else {
      this.state.List.forEach((item) => {
        if (item.id === id) {
          item.status = status;
        }
      });
      this.state.Allchecked=this.state.List.every(item=>{return item.status})
    }

    this.setState({
      List: this.state.List,
      Allchecked:this.state.Allchecked
    });
  }
  // 删除
  DelItemMain(id){
    console.log(id);
    this.state.List.forEach((item,index)=>{
      if (item.id===id) {
        this.state.List.splice(index,1)
      }
    })
    this.setState({
      List:this.state.List
    })
  }
  // 选中删除
  CheckDel(){
    this.state.List=this.state.List.filter(item=>{
      return !item.status
    })
    this.setState({
      List:this.state.List
    })
  }
  render() {
    const { List, Allchecked,Donenum ,Allnum} = this.state;
    const NumInfo={
      Donenum:List.filter(item=>{return item.status}).length,
      Allnum:List.length
    }
    return (
      <div id="app">
        <ItemHead Addinput={this.Addinput.bind(this)}></ItemHead>
        <MainItem
          ChangeCheck={this.ChangeCheck.bind(this)}
          DelItemMain={this.DelItemMain.bind(this)}
          List={List}
        ></MainItem>
        <FooterItem
          Donenum={NumInfo.Donenum}
          Allnum={NumInfo.Allnum}
          CheckDel={this.CheckDel.bind(this)}
          ChangeCheck={this.ChangeCheck.bind(this)}
          Allchecked={Allchecked}
        ></FooterItem>
      </div>
    );
  }
}

export default App;

头部子组件内容

ItemHead.jsx

import "./Index.scss";

import React, { Component } from "react";

 class ItemHead extends Component {
  constructor(props) {
    super(props);
    this.input=React.createRef()
    this.state={
        valuetitle:''
    }
  }
  ChangeInput(e){
    console.log('默认事件',e.keyCode);
    if (e.keyCode===13) {
        this.props.Addinput({title:this.input.current.value,status:false,id:new Date().getTime()})
        this.input.current.value=''
    }
        // console.log(this.input.current.value);
        // console.log(this.props);
  }
  render() {
    return (
      <div className="_head_title">
        <h2>ToDoList</h2>
        <input type="text" ref={this.input} onKeyDown={this.ChangeInput.bind(this)} />
      </div>
    );
  }
}
export default ItemHead

css样式

._head_title {
  width: 100%;
  height: 50px;
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  box-sizing: border-box;
}

._head_title input {
  width: 70%;
  height: 40px;
  border-radius: 30px;
  background-color: white;
  border: none;
}

MainBody.jsx

import "./Index.scss";

import React, { Component } from "react";
class MainItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    console.log(this.props);
  }
  ChangeChecked(id, e) {
    
    this.props.ChangeCheck(id,e.target.checked)
  }
  DelitemMain(id){
    // console.log(id);
    this.props.DelItemMain(id)
  }
  render() {
    const { List } = this.props;
    return (
      <div>
        {List.map((item) => {
          return (
            <div className="_main_item" key={item.id}>
              <input
                type="checkbox"
                checked={item.status}
                onChange={this.ChangeChecked.bind(this, item.id)}
                name=""
                id=""
              />
              <div>{item.title}</div>
              <div onClick={this.DelitemMain.bind(this,item.id)}>x</div>
            </div>
          );
        })}
      </div>
    );
  }
}
export default MainItem;

FooterItem.jsx

import './Index.scss'
import React ,{Component} from 'react'
class FooterItem extends Component{
    constructor(props){
        super(props)
    }
    ChangeAll(e){
        console.log(e);
        console.log(this.props);
        this.props.ChangeCheck(0,e.target.checked,true)
    }
    CheckDel(){
        this.props.CheckDel()
    }

    render(){
        const {Allchecked,Donenum,Allnum} =this.props
        return (
            <div className="_footer_done">
                <div>已完成:{Donenum}/{Allnum}</div>
                <div><input type="checkbox"checked={Allchecked} onChange={this.ChangeAll.bind(this)} name="" id="" />全选</div>
                <div onClick={this.CheckDel.bind(this)}>选中删除</div>
            </div>
        )
    }
} 

export default FooterItem

react初步入门，基本有点框架基础就可以

这个todolist主要是用react的class类组件写的