更改状态onClick React + Redux [英] Change state onClick React+Redux
本文介绍了更改状态onClick React + Redux的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用onClick事件更改currentPage状态的值?单击页面数量的按钮后,我想更改值.
How can I change value of currentPage state using onClick event? I would like to change value after click button with number of page.
组件:
import React from 'react';
import { connect } from 'react-redux';
import { setCurrentPage } from '../actions/pages';
const PageItem = ({ pageNumber }) => (
<li className="page-link"
onClick = {(e) => this.setCurrentPage(e) }
id = { pageNumber }>
{ pageNumber }
</li>
);
const mapStateToProps = (state) => {
return {
pages: state.pages.currentPage
};
};
const mapDispatchToProps = (dispatch) => ({
setCurrentPage: () => dispatch(setCurrentPage(pageNumber))
});
export default connect(mapStateToProps, mapDispatchToProps)(PageItem);
减速器:
const pagesReducerDefaultState = {
currentPage: 1
};
export default (state = pagesReducerDefaultState, action) => {
switch (action.type) {
case 'SET_CURRENT_PAGE':
return action.currentPage;
default:
return state;
}
}
操作:
export const setCurrentPage = (currentPage) => ({
type: 'SET_CURRENT_PAGE',
currentPage
});
推荐答案
我修复了您的一些错误.
首先,我假设您已经在根组件中进行了Provider
标记,并为存储创建了一个实例(如果不确定,请发送App.js文件的内容).
I fixed some of your errors.
To begin with, I suppose that you have made a Provider
markup in your root Component and make an instance to a store (if you're not sure, send the content of the App.js file).
//组件
const PageItem = ({ pageNumber, setCurrentPage }) => (
<li
className="page-link"
onClick={() => setCurrentPage(pageNumber)}
id={pageNumber}
>
{pageNumber}
</li>
);
const mapStateToProps = state => {
return {
page: state.currentPage
};
};
const mapDispatchToProps = {
setCurrentPage
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(PageItem);
const pagesReducerDefaultState = {
currentPage: 1
};
一些想法:
- 您不能在函数中使用
this
,只能在类中使用 -
mapDispatchToProps
可以与简单的垃圾对象(例如我最近才了解到的).这样就不那么冗长了,因为您只能提及action creator
(在您的示例中为setCurrentPage
) - 您已经在道具中发送了
setCurrentPage
,因此您可以像我写的那样检索它.也许ES6在这里是神秘的,所以ES5等效于:
- you can't use
this
in a function, only in a class mapDispatchToProps
may be used with a simple litteral object (like I learned it recently). This is less verbose then, because you may only mention theaction creator
(in your example,setCurrentPage
)- you have send
setCurrentPage
in the props, so you can retrieve it like I wrote. Maybe ES6 is cryptic here, so the ES5 equivalent will be:
function PageItem(props) {
return (
<li
className="page-link"
onClick={() => props.setCurrentPage(props.pageNumber)}
id={props.pageNumber}
>
{props.pageNumber}
</li>
);
};
//减速器
const initialState = {
currentPage: 1
};
export const reducer = (state = initialState, action) => {
switch (action.type) {
case "SET_CURRENT_PAGE":
return {
currentPage: action.currentPage
};
default:
return state;
}
};
- 您的状态是具有属性
currentPage
的对象.因此,减速器必须返回此类对象(因此return action.currentPage
不正确) - your state is an object with a property
currentPage
. So your reducer must return this kind of object (soreturn action.currentPage
was not correct)
这篇关于更改状态onClick React + Redux的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文