React实现todolist功能


Posted in Javascript onDecember 28, 2020

一、index.js

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

二、TodoList

1、constructor

constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: []
    }
  }

2、render

render() {
    return (
      <React.Fragment>
        <div>
          {/*label标签的作用,扩大点击范围*/}
          <label htmlFor='insertArea'>输入内容</label>
          <input
            id='insertArea'
            className={'inputStyle'}
            value={this.state.inputValue}
            onChange={event => this.handleInputChangle(event)}/>
          <button onClick={event => this.handleButtonVlue(event)}>提交</button>
          <hr/>
          <ul>
            {this.getTodoList()}
          </ul>
        </div>
      </React.Fragment>
    )
  }

3、getTodoList

getTodoList() {
    return (
      this.state.list.map((value, index) => {
        return <TodoItem2
          key={index}
          itemVlue={value}
          itemIndex={index}
          itemDelete={this.handleItemDelete.bind(this)}>
          {/*这块需要强制绑定为父组件的this,否则在子组件中找不到*/}
        </TodoItem2>
      })
    );
  }

4、事件函数

/**
   * 监听输入框变化
   **/
  handleInputChangle(e) {
    const value = e.target.value;
    this.setState(() => ({
      inputValue: value
    }))
  }
 
  /**
   * 监听点击按钮
   **/
  handleButtonVlue(e) {
    this.setState((prevStatus) => ({
      list: [...prevStatus.list, this.state.inputValue],
      inputValue: ''
    }))
  }
 
  /**
   * 监听点击item删除
   **/
  handleItemDelete(index) {
    this.setState((preStatus) => {
      const list = [...preStatus.list];
      list.splice(index, 1)
      return {
        list
      }
    });
  }

5、网络请求

使用Charles代理网络,安装证书,设置端口,在手机上面打开网络WIFI,设置代理IP和端口,这样就能监听到手机访问的网络,拦截请求,代理本地地址,返回本地数据。

React实现todolist功能

需要注意的是charles识别不出来localhost,需要在package.json中改成设置:

* "start": "set PORT=3000 HOST=localhost.charlesproxy.com && react-scripts start",

访问时候使用:

http://localhost.charlesproxy.com:3000/

(1)引入axios

yarn yarn add axios 

(2)在componentDidMount进行网络请求

/**
   * 这块进行网络请求
   */
  componentDidMount() {
    axios.get('api/todolist')
      .then((res) => {
        this.setState({
          list: [...res.data]
        })
      }).catch(() => {
      alert('发生错误')
    })
  }

这样运行程序的时候初始值就有了数据了。

总结:当前组件的state或者prop发生改变的时候,App中的render函数就会重新执行。做到数据和页面同步。当父组件发生变化重新执行的时候,子组件的render也会被重新执行一次。

到此这篇关于React实现todolist功能的文章就介绍到这了,更多相关React实现todolist内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 #Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 #Javascript
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
js仿淘宝放大镜效果
Dec 28 #Javascript
JavaScript实现原型封装轮播图
Dec 27 #Javascript
JavaScript代码实现简单计算器
Dec 27 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
获取远程文件大小的php函数
2010/01/11 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python实用代码片段收集贴
2015/06/03 Python
Python中list初始化方法示例
2016/09/18 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
postman和python mock测试过程图解
2020/02/22 Python
北京华建集团SQL面试题
2014/06/03 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
护理专业自荐书
2014/06/04 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android