怎么在React中使用Antd和Redux實現(xiàn)待辦事件-創(chuàng)新互聯(lián)

本篇文章為大家展示了怎么在React中使用Antd和Redux實現(xiàn)待辦事件，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

目前成都創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計、松滋網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

文件目錄結(jié)構(gòu)如下：

怎么在React中使用Antd和Redux實現(xiàn)待辦事件

創(chuàng)建文件之前，首先創(chuàng)建圖書館管理員(store)，他不知道書具體在哪里，所以再創(chuàng)建小冊子(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的值,我把他直接賦值給狀態(tài):

怎么在React中使用Antd和Redux實現(xiàn)待辦事件

我先實現(xiàn)一個由Component發(fā)送action,store收到action,在由reducer接受處理，最后返回一個新的狀態(tài)，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(
      <div style={{marginTop:"10px",marginLeft:"20px"}}>
        <Input placeholder="請輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
        </div>
      </div>
    );
  }
  
}

思路：我們通過input框中監(jiān)聽內(nèi)容變化發(fā)送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看一下，你就會發(fā)現(xiàn)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(
      <div style={{marginTop:"10px",marginLeft:"20px"}}>
        <Input placeholder="請輸入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
        <Button type="primary" onClick={this.handleSend}>發(fā)送</Button>
        <div style={{width:"400px",marginTop:"10px"}}>
        <List
           bordered
           dataSource={this.state.list}
           renderItem={(item,index) => (<List.Item onClick={this.handleItem.bind(this,index)}>{item}</List.Item>)}/>
        </div>
      </div>
    );
  }
  
}
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TodoList from './redux/TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));

上述內(nèi)容就是怎么在React中使用Antd和Redux實現(xiàn)待辦事件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：怎么在React中使用Antd和Redux實現(xiàn)待辦事件-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article0/dddgio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、全網(wǎng)營銷推廣、軟件開發(fā)、網(wǎng)站改版、商城網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)