本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件3(状态管理之Flux的使用①简单使用)---2018.03.06
2、React第三方组件3(状态管理之Flux的使用②TodoList上)---2018.03.07
3、React第三方组件3(状态管理之Flux的使用③TodoList中)---2018.03.08
4、React第三方组件3(状态管理之Flux的使用④TodoList下)---2018.03.09
5、React第三方组件3(状态管理之Flux的使用⑤异步操作)---2018.03.12
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、我们复制flux4一份到flux5
2、修改flux下的Index.jsx
3、我们把数据请求放在Action中
import apiRequestAsync from '../../../../public/js/apiRequestAsync';
async postList(){ let todoList = await apiRequestAsync.post('todoList'); TodoDispatcher.dispatch({ type: TodoActionTypes.POST_LIST, todoList, }); },
4、修改Main.jsx代码,完整代码如下
import React from 'react'; class Input extends React.Component { render() { let {addTodo} = this.props; return ( <div className="todoList"> <input type="text" ref="todoInput"/> <button onClick={() => addTodo(this.refs['todoInput'].value)}>添加 </button> </div> ); } } class List extends React.Component { render() { let {list} = this.props.state; let {ItemEdit, type} = this.props; let LiCont = ({data}) => <li> {data.title} <button onClick={() => 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 ListBox extends React.Component { componentDidMount() { this.props.postList() } render() { let props = this.props; return ( <div className="cont"> <div className="box"> 全部 <List {...props} type={0}/> </div> <div className="box"> 未删除 <List {...props} type={1}/> </div> <div className="box"> 已删除 <List {...props} type={2}/> </div> </div> ) } } const Index = (props) => <div className="todoList"> <Input {...props}/> <ListBox {...props}/> </div> ; export default Index;
5、看下浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!