lx提交

package.json

@@ -9,6 +9,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "antd": "^4.0.2",
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
@@ -18,7 +19,14 @@
     "redux": "^4.0.5"
   },
   "devDependencies": {
+    "antd": "^4.0.2",
+    "babel-plugin-import": "^1.13.0",
     "react-scripts": "3.4.0"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

public/index.html

@@ -6,6 +6,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="../node_modules/antd/dist/antd.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

src/actions/PlayersActions.js

@@ -20,3 +20,9 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}

src/components/PlayerList.js

@@ -20,6 +20,8 @@ class PlayerList extends Component {
             />
           );
         })}
+
+
       </ul>
     );
   }

src/constants/ActionTypes.js

@@ -1,3 +1,4 @@
 export const ADD_PLAYER = 'ADD_PLAYER';
 export const STAR_PLAYER = 'STAR_PLAYER';
 export const DELETE_PLAYER = 'DELETE_PLAYER';
+export const CLEAR_DATA = 'CLEAR_DATA';

src/containers/PlayerListApp.js

@@ -2,29 +2,59 @@ import React, { Component } from 'react';
 import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
+import { addPlayer, deletePlayer, starPlayer ,clearData} from '../actions/PlayersActions';
 import { PlayerList, AddPlayerInput } from '../components';
+import { Pagination,Button } from 'antd';
+
 
 class PlayerListApp extends Component {
+  constructor(props,context){
+    super()
+    this.state = {
+      playersById: props.playerlist.playersById.slice(0,5)
+    }
+  }
   render() {
-    const {
-      playerlist: { playersById },
-    } = this.props;
-
+    let list = this.props.playerlist.playersById;
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
     };
 
+    let onChange = (ev)=>{
+      let ye = ev - 1;
+      let first = ye * 5;
+      let end = first + 5;
+      if(first-1 < 0){
+        first = 1;
+        end = 6;
+      }
+      this.setState({
+        playersById : list.slice(first-1,end-1)
+      })
+    }
+
+    let clear = ()=>{
+      this.setState({
+        playersById : []
+      })
+    }
+
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
+
         <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+
+        <PlayerList players={this.state.playersById} actions={actions} />
+
+        <Button onClick = {clear}>清空当前页</Button>
+        <Pagination defaultCurrent={1} total={40} onChange={onChange} />
       </div>
     );
   }
+
 }
 
 function mapStateToProps(state) {
@@ -37,5 +67,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+    clearData
   },
 )(PlayerListApp);

src/reducers/playerlist.js

@@ -3,13 +3,13 @@ import * as types from '../constants/ActionTypes';
 const initialState = {
   playersById: [
     {
-      name: 'LeBron James',
+      name: '1LeBron James',
       team: 'LOS ANGELES LAKERS',
       position: 'SF',
       starred: true,
     },
     {
-      name: 'Kevin Duran',
+      name: '2Kevin Duran',
       team: 'GOLDEN STATE WARRIORS',
       position: 'SF',
       starred: false,
@@ -38,6 +38,52 @@ const initialState = {
       position: 'SF',
       starred: false,
     },
+    {
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    },{
+      name: 'Kawhi Leonard',
+      team: 'TORONTO RAPTORS',
+      position: 'SF',
+      starred: false,
+    }
   ],
 };
 
@@ -70,6 +116,10 @@ export default function players(state = initialState, action) {
         ...state,
         playersById: players,
       };
+    case types.CLEAR_DATA:
+      return {
+        playersById: {},
+      };
 
     default:
       return state;