怎么在React中使用Antd和Redux实现待办事件
本篇文章为大家展示了怎么在React中使用Antd和Redux实现待办事件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联技术团队10多年来致力于为客户提供成都网站设计、成都网站制作、成都品牌网站建设、成都全网营销、搜索引擎SEO优化等服务。经过多年发展,公司拥有经验丰富的技术团队,先后服务、推广了1000+网站,包括各类中小企业、企事单位、高校等机构单位。
文件目录结构如下:
创建文件之前,首先创建图书馆管理员(store),他不知道书具体在哪里,所以再创建小册子(redux),给到图书馆管理员(store):
//src/redux/index.js import {createStore} from 'redux'; import reducer from './reducer' const store=createStore(reducer); export default store;
//src/redux/reducer.js const defaultState={ inputValue:'', list:[1,2] } export default(state=defaultState,action)=>{ return state; }
*注释:刚开始state,这里一定要给state赋一个初始值,才不会报错
接下来你就可以,在todolist.js中用store.getState()获取到store的值,我把他直接赋值给状态:
我先实现一个由Component发送action,store收到action,在由reducer接受处理,最后返回一个新的状态,Component接收显示:
//src/redux/TodoList.js import React from 'react'; import 'antd/dist/antd.css'; import { Input,Button,List} from 'antd'; import store from './index'; export default class TodoList extends React.Component{ constructor(props){ super(props); this.state=store.getState(); } componentDidMount(){ console.log(this.state); } handleChg=(e)=>{ const action={ type:'change_input_value', inputValue:e.target.value } store.dispatch(action); } render(){ console.log(this.state) return(
思路:我们通过input框中监听内容变化发送action,reucer去处理
//src/redux/reducer.js const defaultState={ inputValue:'', list:[1,2] } export default(state=defaultState,action)=>{ if(action.type==='change_input_value'){ const newState=JSON.parse(JSON.stringify(state)) newState.inputValue=action.inputValue; return newState; } return state; }
你可以打印出newState看一下,你就会发现inputValue就是你输入的值了。
接下来的就可以举一反三了。
完整代码:
///src/redux/index.js import {createStore} from 'redux'; import reducer from './reducer' const store=createStore(reducer);
///src/redux/reducers.js export default store; const defaultState={ inputValue:'', list:[1,2] } export default(state=defaultState,action)=>{ if(action.type==='change_input_value'){ const newState=JSON.parse(JSON.stringify(state)) newState.inputValue=action.inputValue; return newState; } if(action.type==='send_message'){ const newState=JSON.parse(JSON.stringify(state)) newState.list.push(newState.inputValue); newState.inputValue=''; return newState; } if(action.type==='delete_message'){ const newState=Object.assign({},state); newState.list.splice(action.index,1); return newState; } return state; }
///src/redux/todoList.js import React from 'react'; import 'antd/dist/antd.css'; import { Input,Button,List} from 'antd'; import store from './index'; const data=[ 1,2,3 ]; export default class TodoList extends React.Component{ constructor(props){ super(props); this.state=store.getState(); store.subscribe(this.F5) } componentDidMount(){ console.log(this.state); } handleChg=(e)=>{ const action={ type:'change_input_value', inputValue:e.target.value } store.dispatch(action); } handleSend=()=>{ const action={ type:'send_message', } store.dispatch(action); } F5=()=>{ this.setState(store.getState()); } handleItem=(index)=>{ const action={ type:'delete_message', index:index } store.dispatch(action); } render(){ console.log(this.state) return(); } }(
{item} )}/>
//index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import TodoList from './redux/TodoList'; ReactDOM.render(, document.getElementById('root'));
上述内容就是怎么在React中使用Antd和Redux实现待办事件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前文章:怎么在React中使用Antd和Redux实现待办事件
标题URL:http://pwwzsj.com/article/ghdiji.html