怎么在React中使用Antd和Redux实现待办事件

本篇文章为大家展示了怎么在React中使用Antd和Redux实现待办事件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

创新互联技术团队10多年来致力于为客户提供成都网站设计、成都网站制作、成都品牌网站建设成都全网营销、搜索引擎SEO优化等服务。经过多年发展,公司拥有经验丰富的技术团队,先后服务、推广了1000+网站,包括各类中小企业、企事单位、高校等机构单位。

文件目录结构如下:

怎么在React中使用Antd和Redux实现待办事件

创建文件之前,首先创建图书馆管理员(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的值,我把他直接赋值给状态:

怎么在React中使用Antd和Redux实现待办事件

我先实现一个由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实现待办事件
转载源于:http://scjbc.cn/article/ghdiji.html

其他资讯