todolist_qq_21696621的博客-程序员宅基地

技术标签: react  

最基本的一个todolist,涉及基本的组件通信。效果如下:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './TodoList';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

TodoList.js

import React,{Component,Fragment} from 'react';
import TodoItem from './TodoItem';
import Test from './Test';

class TodoList extends Component{

    // 当组件的state或者props发生改变时,render函数会重新执行
    constructor(props){
        super(props);
        this.state = {
            inputValue:'',
            list:[]
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
    }
    componentWillMount(){
        // console.log('componentWillMount');
    }
    render(){
        // console.log('render');
        return (
            <Fragment>
                <div>
                    <label htmlFor="insertArea">输入内容</label>
                    <input
                        id="insertArea"
                        value={this.state.inputValue}
                        onChange={this.handleInputChange}
                        ref={(input)=>{this.input = input}}
                    />
                    <button onClick={this.handleBtnClick}>提交</button>
                </div>
                <ul>
                    {
                        this.getTodoItem()
                    }
                </ul>
                {/* <Test content={this.state.inputValue}/> */}
            </Fragment>
        )
    }

    getTodoItem(){
        return this.state.list.map((item,index)=>{
            return(
                <div key={index}>
                    <TodoItem
                        content = {item}
                        index = {index}
                        deleteItem = {this.handleItemDelete}
                    />
                </div>
            )
        })
    }

    handleInputChange(e){
        // const value = e.target.value; // 使用setState异步函数赋值必须将e.target值提前赋值,不然会报错
        const value = this.input.value;
        this.setState(()=>({
            // inputValue:e.target.value
            inputValue:value
        }));
        
    }

    handleBtnClick(){

        this.setState((prevState)=>({
            list:[...prevState.list,prevState.inputValue], //数组追加元素
            inputValue:''
        }));
    }

    handleItemDelete(index){
        
        this.setState((prevState)=>{
            const list = [...prevState.list];
            list.splice(index,1);
            return {
                list
            }
        });
    }

}
export default TodoList;

TodoItem.js

import React,{Component} from 'react';

class TodoItem extends Component{

    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    shouldComponentUpdate(nextProps,nextState){
        if(nextProps.content !== this.props.content){
            return true;
        }else{
            return false;
        }
    }
    render(){
        console.log('TodoItem render');
        const {content} =  this.props ;
        return(
            <div 
                onClick={this.handleClick}
                dangerouslySetInnerHTML={
   {__html:content}}
            
            />
                
        )
    }

    handleClick(){
        const {deleteItem,index} = this.props ;
        deleteItem(index);
    }

}
export default TodoItem;

代码链接:

链接:https://pan.baidu.com/s/1HKikCZontl2wQig1oXKc8Q 
提取码:hghn 
复制这段内容后打开百度网盘手机App,操作更方便哦--来自百度网盘超级会员V5的分享

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_21696621/article/details/115392527

智能推荐

Ogre处理顶点/索引数据_miao6664659的博客-程序员宅基地

原文摘自:http://blog.csdn.net/zhuxiaoyang2000/article/details/6565962zhuxiaoyang2000的博客。下面是我的应用:void GameState::updateMesh(const Ogre::MeshPtr mesh){ bool added_shared=false; size_t current_offse

第一章、Bean Validation(简介)_往前的娘娘的博客-程序员宅基地

本文档是Java EE和Java SE中用于JavaBean验证的Java API规范。这项工作的技术目标是为了Java应用程序的开发人员提供类级别的约束声明和验证工具,以及约束元数据存储和查询API1.1、专家组这项工作是Java Community Process 计划下JSR 303的一部分,该规范是JSR303专家组成员共同努力的结果,这些成员按字母顺序包括以下现任和前任专家组成员:Geert BevinEmmanuel Bernard (Red Hat, Inc.) - Speci.

“java.lang.IllegalArgumentException: Failed to evaluate expression ‘ROLE_USER’”报错的解决..._weixin_34397291的博客-程序员宅基地

如题所示,在搭建基于Spring Security的项目时,出现了如下的爆粗信息:java.lang.IllegalArgumentException:Failedtoevaluateexpression'ROLE_USER' atorg.springframework.security.access.expression.ExpressionUtils.eva...

以 Serverless 的方式实现 Kubernetes 日志告警_米开朗基杨的博客-程序员宅基地

本文转载自公众号「KubeSphere 云原生」作者简介:方阗,OpenFunction 开源社区 Maintainer。当我们将容器的日志收集到消息服务器之后,我们该如何处理这些日志?部...

随便推点

python boolean_Flask SQLAlchemy SQLITE boolean字段始终返回Fals_多少走一步的博客-程序员宅基地

同一代码不能在OSX上用Python 2.7.10、SQLAlchemy==1.0.9和Flask-SQLAlchemy==2.1、Flask==0.10.1复制:#!/usr/bin/env python# encoding: utf-8from flask import Flaskfrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name...

玩 High API 系列之:实现钉钉Ding功能_weixin_33788244的博客-程序员宅基地

场景介绍钉钉是企业IM市场上的领先者,深受中小企业客户的喜欢,就再几天前刚刚宣布用户数超过1亿!在钉钉里面有个特别实用的功能,那就是Ding一下,如果你发的消息特别紧急,可以直接通过短信、电话等方式直接通知到接收人的手机上。这个特别实用的功能,在API时代,我们普通的用户可以不用太多投入,直接调用API就能快速实现啦。了解更多场景如何玩High API...

PAT (Advanced Level) Practice 1109 Group Photo (25 分) 凌宸1642_lingchen1642的博客-程序员宅基地

PAT (Advanced Level) Practice 1109 Group Photo (25 分) 凌宸1642题目描述:Formation is very important when taking a group photo. Given the rules of forming K rows with N people as the following:The number of people in each row must be N/K (round down to the nea

python汉诺塔用循环结构实现_【Python入门】5.函数基础&递归函数实现汉诺塔算法..._weixin_39889337的博客-程序员宅基地

笔记更新于2019年11月10日,摘要:函数的定义与调用;函数的参数;默认参数;可变参数;关键字参数;命名关键字参数;多种参数组合使用;递归函数;汉诺塔算法实现写在前面:为了更好的学习python,博主记录下自己的学习路程。本学习笔记基于廖雪峰的Python教程,如有侵权,请告知删除。欢迎与博主一起学习Pythonヽ( ̄▽ ̄)ノ函数的定义与调用函数的定义用 def 函数名(参数): 的格式来定...

kubernetes-----pod资源创建与Harbor私有仓库_EoinXu的博客-程序员宅基地

一.pod定义详解二.pod的基本用法三.静态pod四.pod容器共享volume五.pod的配置管理六.在容器内获取pod信息七.pod的生命周期和重启策略六.pod的健康检查和服务可用性检查七.玩转pod调度八.Init Container(初始化容器)九.pod的升级和回滚十.pod的扩容与缩容...

Spring源码解析系列文章(X)——扩展Spring自定义标签_全栈编程网的博客-程序员宅基地

目录1、创建承载自定义标签属性的类2、创建XSD3、创建解析XSD文件自定义标签的类4、创建Handler5、编写 spring.handlers 和 spring.schemas文件spring.handlersspring.schemas6、引入自定义标签7、验证1、创建承载自定义标签属性的类package thinking.in.spring.b...

推荐文章

热门文章

相关标签