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 相关文章推荐
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
详解TypeScript的基础类型
Feb 18 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
DOM 基本方法
2009/07/18 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
Python中实现三目运算的方法
2015/06/21 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
python实现顺序表的简单代码
2018/09/28 Python
python实现合并两个排序的链表
2019/03/03 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python实现扫码工具的示例代码
2020/10/09 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
2014年司法所工作总结
2014/11/22 职场文书
匿名信格式范文
2015/05/27 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL