更改状态onClick React + Redux [英] Change state 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 the action 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 (so return action.currentPage was not correct)

这篇关于更改状态onClick React + Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！