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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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/03/04 星际争霸
php 删除数组元素
2009/01/16 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
yii操作cookie实例简介
2014/07/09 PHP
php中in_array函数用法探究
2014/11/25 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
jquery动态分页效果堪比时光网
2014/09/25 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
初学Python函数的笔记整理
2015/04/07 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
python如何查看网页代码
2020/06/07 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
金融专业个人求职信范文
2013/11/28 职场文书
关爱老人标语
2014/06/21 职场文书
师范生见习自我总结
2015/06/23 职场文书
小型婚礼主持词
2015/06/30 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA