React实现todolist功能

 更新时间:2020年12月28日 11:26:50   作者:一杯清泉  
这篇文章主要介绍了React实现todolist功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、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和端口,这样就能监听到手机访问的网络,拦截请求,代理本地地址,返回本地数据。

需要注意的是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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 关于react中组件通信的几种方式详解

    关于react中组件通信的几种方式详解

    这篇文章主要给大家介绍了关于react中组件通信的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • React Native使用百度Echarts显示图表的示例代码

    React Native使用百度Echarts显示图表的示例代码

    本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 详解使用React进行组件库开发

    详解使用React进行组件库开发

    本篇文章主要介绍了详解使用React进行组件库开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • React中获取数据的3种方法及优缺点

    React中获取数据的3种方法及优缺点

    这篇文章主要介绍了React中获取数据的3种方法及优缺点,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 详解一个基于react+webpack的多页面应用配置

    详解一个基于react+webpack的多页面应用配置

    这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React编程中需要注意的两个错误

    React编程中需要注意的两个错误

    React可以说是前端的先驱者,它总是会引领整个前端的潮流。 但我们在使用也经常会遇到错误,下面这篇文章主要给大家介绍了关于React编程中需要注意的两个错误,需要的朋友可以参考下
    2021-05-05
  • React组件对子组件children进行加强的方法

    React组件对子组件children进行加强的方法

    这篇文章主要给大家介绍了关于React组件中对子组件children进行加强的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • create-react-app构建项目慢的解决方法

    create-react-app构建项目慢的解决方法

    这篇文章主要介绍了create-react-app构建项目慢的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 浅谈从React渲染流程分析Diff算法

    浅谈从React渲染流程分析Diff算法

    这篇文章主要介绍了浅谈从React渲染流程分析Diff算法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React实现动效弹窗组件

    React实现动效弹窗组件

    最近在使用react开发项目,遇到这样一个需求实现一个带有动效的 React 弹窗组件,如果不考虑动效,很容易实现,接下来小编通过本文给大家介绍React实现动效弹窗组件的实现代码,一起看看吧
    2021-06-06

最新评论