react简书项目学习笔记32在组件中调用action传参

MeiLuan_yahoho

于 2019-02-13 15:00:30 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 前端文章标签：传参 action react

本文链接：https://blog.youkuaiyun.com/MeiLuan_yahoho/article/details/87182685

react 同时被 2 个专栏收录

43 篇文章

订阅专栏

前端

41 篇文章

订阅专栏

本文详细讲解了在React中如何正确地通过函数形式调用action并传递参数，避免直接调用导致的问题。通过具体示例展示了如何在组件中触发页面切换，并更新状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react中调用action传参时要通过函数的形式
例子如下：

  <div onClick={() => { handleChangePage(page, totalPage) }}>换一批</div>

注意不能直接写οnclick=handleChangePage(page, totalPage),要写在新函数中

onClick={() => { handleChangePage(page, totalPage)

action部分对应代码

const mapDispatchToProps = (dispatch) => {
      return {
        handleChangePage(page, totalPage) {
          if (page < totalPage) {
            dispatch(actionCreators.changePage(page + 1));
          } else {
            dispatch(actionCreators.changePage(1));
          }
        }
      }
    }

actionCreators

export const changePage = (page) => ({
  type: constants.CHANGE_PAGE,
  page
});

reducer

export default (state = defaultState, action) => {
  switch (action.type) {
  ...
    case constants.CHANGE_PAGE:
      return state.set('page', action.page);
    default:
      return state;
  }
}