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

xiaoxiao2021-02-28  21

本教程总共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、我们先复制一份reflux3到reflux4

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'import ReFlux3 from './reflux3/Index'import ReFlux4 from './reflux4/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>                <NavLink to="/ReFlux/ReFlux3" activeClassName="selected">ReFlux3</NavLink>                <NavLink to="/ReFlux/ReFlux4" activeClassName="selected">ReFlux4</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}/>            <Route path={`${match.url}/ReFlux3`} component={ReFlux3}/>            <Route path={`${match.url}/ReFlux4`} component={ReFlux4}/>        </div>    </HashRouter>;export default Index;

3、修改 reflux4下的Index.jsx

import React from 'react'import Reflux from 'reflux'import Action from './Action'import Store from './Store'class List extends Reflux.Component {constructor(props) {super(props);        this.store = Store;    }render() {let {list} = this.state;        let type = this.props.type;        let LiCont = ({data}) =><li>                {data.title}<button                    onClick={() => Action.itemEdit({id: data.id,                        status: data.status === 1 ? 0 : 1                    })}className={data.status === 1 ? "del" : "recovery"}>                    {data.status === 1 ? "删除" : "恢复"}</button>            </li>        ;        return (<div className="list">                { list.length > 0 && list.map(data => [ type === 0 ?<LiCont data={data} key={data.id}/>                                : type === 1 && data.status === 1 ?<LiCont data={data} key={data.id}/>                                    : type === 2 && data.status === 0 ?<LiCont data={data} key={data.id}/>                                        :null                        ] ) }</div>        );    }}class Index extends Reflux.Component {render() {return (<div className="todoList">                <input type="text" ref="todoInput"/>                <button onClick={() => Action.addTodo(this.refs['todoInput'].value)}>添加</button>                <div className="cont">                    <div className="box">                        全部<List type={0}/>                    </div>                    <div className="box">                        未删除<List type={1}/>                    </div>                    <div className="box">                        已删除<List type={2}/>                    </div>                </div>            </div>        );    }}export default Index;

4、查看浏览器

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

转载请注明原文地址: https://www.6miu.com/read-2650077.html

最新回复(0)