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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
微信小程序实现多行文字滚动
Nov 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python交互式图形编程的实现
2019/07/25 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
运动员口号
2014/06/09 职场文书
教书育人演讲稿
2014/09/11 职场文书
公司授权委托书样本
2014/09/15 职场文书
倡议书的格式写法
2015/04/28 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL