本篇文章为大家展示了怎么在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的值,我把他直接赋值给状态:
我先实现一个由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(
<div style={{marginTop:"10px",marginLeft:"20px"}}>
<Input placeholder="请输入" style={{width:"400px",marginRight:"10px"}} onChange={this.handleChg} value={this.state.inputValue}/>
</div>
</div>
);
}
}思路：我们通过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(
<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}>发送</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'));上述内容就是怎么在React中使用Antd和Redux实现待办事件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
