专栏首页前端人人React第三方组件4(状态管理之Reflux的使用②TodoList上)

React第三方组件4(状态管理之Reflux的使用②TodoList上)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件4(状态管理之Reflux的使用①简单使用)---2018.03.13

2、React第三方组件4(状态管理之Reflux的使用②TodoList上)---2018.03.14

3、React第三方组件4(状态管理之Reflux的使用③TodoList中)---2018.03.15

4、React第三方组件4(状态管理之Reflux的使用④TodoList下)---2018.03.16

5、React第三方组件4(状态管理之Reflux的使用⑤异步操作)---2018.03.19

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件4(状态管理之Reflux的使用①简单使用)---2018.03.13

2、React第三方组件4(状态管理之Reflux的使用②TodoList上)---2018.03.14

3、React第三方组件4(状态管理之Reflux的使用③TodoList中)---2018.03.15

4、React第三方组件4(状态管理之Reflux的使用④TodoList下)---2018.03.16

5、React第三方组件4(状态管理之Reflux的使用⑤异步操作)---2018.03.19

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

1、我们复制一份reflux1到reflux2

2、修改reflux下Index.jsx文件

import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import ReFlux1 from './reflux1/Index'
import ReFlux2 from './reflux2/Index'

const Index = ({match}) =>
    <HashRouter>
        <div>
            <div className="nav">
                <NavLink to="/ReFlux/ReFlux1" activeClassName="selected">ReFlux1</NavLink>
                <NavLink to="/ReFlux/ReFlux2" activeClassName="selected">ReFlux2</NavLink>
            </div>
            <Route exact path={`${match.url}`}
                   render={() => (<Redirect to={`${match.url}/ReFlux1`}/>)}/>
            <Route path={`${match.url}/ReFlux1`} component={ReFlux1}/>
            <Route path={`${match.url}/ReFlux2`} component={ReFlux2}/>
        </div>
    </HashRouter>
;

export default Index;

3、修改reflux2下Index.jsx

import React from 'react'
import Reflux from 'reflux'
import Action from './Action'
import Store from './Store'

class Index extends Reflux.Component {
    constructor(props) {
        super(props);
        this.store = Store;
    }

    render() {
        let list = this.state.list;
        return (
            <div className="todoList">
                <input type="text" ref="todoInput"/>
                <button onClick={() => Action.addTodo(this.refs['todoInput'].value)}>添加
                </button>
                <div>
                    {
                        list.length > 0 && list.map(data =>
                            <li key={data.id}>
                                {data.title}
                            </li>
                        )
                    }
                </div>
            </div>
        );
    }
}

export default Index;

4、修改 Action.js

import Reflux from 'reflux'

let Action = Reflux.createActions([
    'addTodo'
]);
export default Action;

5、修改 Store.js

import Reflux from 'reflux'
import Action from './Action'

class Store extends Reflux.Store {
    constructor() {
        super();
        this.listenables = Action;
        this.state = {
            list: []
        }
    }

    onAddTodo(title) {
        if (!title) {
            alert('内容不能为空');
        }else {
            let list = this.state.list;
            list.push({id: list.length + 1, title: title, status: 1});
            this.setState({list: list});
        }

    }
}

export default Store;

6、看下浏览器

本文分享自微信公众号 - 前端人人(frontend_everyone),作者:思铭

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)

    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件2(状态管理之Refast的使用①...

    前端人人
  • React第三方组件4(状态管理之Reflux的使用⑤异步操作)

    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

    前端人人
  • React第三方组件5(状态管理之Redux的使用⑤异步操作)

    本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

    前端人人
  • 推荐1-高并发场景,nginx怎么限速

    Nginx限速模块分为哪几种?按请求速率限速的burst和nodelay参数是什么意思?漏桶算法和令牌桶算法究竟有什么不同?本文将带你一探究竟。

    猿哥
  • 高并发场景,nginx怎么限速

    我们会通过一些简单的示例展示Nginx限速限流模块是如何工作的,然后结合代码讲解其背后的算法和原理。

    后端技术探索
  • 11月6日排序函数,匿名函数,回调函数,递归函数, zip函数

    ##### 排序sort, sorted的区别: list.sort(func=None, key=None, reverse=False(or Tru...

    武军超
  • TOP 5% Kaggler:如何在 Kaggle 首战中进入前 10% | 干货

    编者按:本文作者章凌豪,复旦大学计算机科学专业。有兴趣的同学可以移步他的个人主页:https://dnc1994.com/Introduction(点击文末“阅...

    AI研习社
  • 开发 | TOP5%Kaggler:如何在 Kaggle 首战中进入前 10%

    Introduction Kaggle 是目前最大的 Data Scientist 聚集地。很多公司会拿出自家的数据并提供奖金,在 Kaggle 上组织数据竞赛...

    AI科技评论
  • boost.context-1.61版本的设计模型变化

    之前写了个C++的协程框架libcopp,底层使用的是boost.context实现,然后剥离了对boost的依赖。然而这样意味着我必须时常跟进boost.co...

    owent
  • 劳务派遣:运营商之痛?运营商之福?

    某用户来中国移动营业厅咨询某些增值业务到底是怎么给订上的?来到柜台,工作人员回答:“一个是人为的,一个是非人为的,就这两种可能,没有第三种。”

    用户1756920

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动