分页+选择

src/actions/PlayersActions.js

@@ -1,9 +1,9 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(info) {
   return {
     type: types.ADD_PLAYER,
-    name,
+    info,
   };
 }
 

src/components/AddPlayerInput.js

@@ -31,9 +31,11 @@ class AddPlayerInput extends Component {
 
   handleSubmit(e) {
     const name = e.target.value.trim();
+    if (!name) return
     if (e.which === 13) {
-      this.props.addPlayer(name);
-      this.setState({ name: '' });
+      this.setState({ name: '' }, () => {
+        this.props.onsubmit(name)
+      });
     }
   }
 }

src/components/AddPositionRadio.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+class AddPositionRadio extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      currentValue: this.props.startPosition || 'SF'
+    }
+  }
+
+  handleChange = position => {
+    this.setState({
+      currentValue: position
+    }, () => {
+      this.props.onpositionchange(position)
+    })
+  }
+
+  render() {
+    const currentValue = this.state.currentValue
+    return (
+      <div>
+        <label>
+          <input
+            type="radio"
+            name='position'
+            value="SF"
+            checked={currentValue === 'SF'}
+            onChange={() => {
+              this.handleChange('SF')
+            }}
+          />SF</label>
+        <label>
+          <input
+            type="radio"
+            name='position'
+            value="PG"
+            checked={currentValue === 'PG'}
+            onChange={() => {
+              this.handleChange('PG')
+            }}
+          />PG</label>
+      </div>
+    )
+  }
+}
+
+export default AddPositionRadio;

src/components/Pagination.css

@@ -0,0 +1,12 @@
+.pagination {
+  margin: 0;
+
+}
+.pagination li {
+  padding: 4px 10px;
+  border: 1px solid aqua;
+  margin-right: 10px;
+}
+.pagination li.selected {
+  background-color: aqua;
+}

src/components/Pagination.js

@@ -0,0 +1,35 @@
+
+import React, { Component } from 'react';
+import './Pagination.css';
+
+class Pagination extends Component {
+  handleClick = e => {
+    const pageNum = e.target.dataset.page
+    if (pageNum) {
+      this.props.onselected(pageNum)
+    }
+  }
+  render() {
+    const {pageCounts, currentPage} = this.props
+    const pageList = [...Array(pageCounts)]
+    return (
+      <ul className='pagination'>
+        {pageList.map((item, index) => {
+          let page = index + 1
+          return (
+            <li
+              key={index}
+              data-page={page}
+              onClick={this.handleClick}
+              className={currentPage === page ? 'selected': ''}
+            >
+              {page}
+            </li>
+          )
+        })}
+      </ul>
+    );
+  }
+}
+
+export default Pagination;

src/components/PlayerList.js

@@ -11,7 +11,7 @@ class PlayerList extends Component {
           return (
             <PlayerListItem
               key={index}
-              id={index}
+              id={index + this.props.prevCounts}
               name={player.name}
               team={player.team}
               position={player.position}

src/components/index.js

@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as Pagination } from './Pagination';
+export { default as AddPositionRadio } from './AddPositionRadio';

src/containers/PlayerListApp.js

@@ -3,14 +3,42 @@ import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
 import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { PlayerList, AddPlayerInput, Pagination, AddPositionRadio } from '../components';
 
 class PlayerListApp extends Component {
+  playsPerPage = 5 // 每页显示数量
+  currentPosition = 'SF'
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentPage: 1
+    }
+  }
+  handlePageSelected = (pageNum) => {
+    pageNum = +pageNum
+    if (this.state.currentPage !== pageNum) {
+      this.setState({
+        currentPage: pageNum
+      })
+    }
+  }
+  handlePositionChange = position => {
+    this.currentPosition = position
+  }
+  handlePlayerAdd = player => {
+    this.props.addPlayer({
+      name: player,
+      position: this.currentPosition
+    })
+  }
   render() {
     const {
       playerlist: { playersById },
     } = this.props;
 
+    const pageCounts = Math.ceil(playersById.length / this.playsPerPage)
+    const { currentPage } = this.state
+    const currentList = playersById.slice((currentPage-1)*this.playsPerPage, currentPage*this.playsPerPage)
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
@@ -20,8 +48,24 @@ class PlayerListApp extends Component {
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
-        <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <AddPlayerInput
+          addPlayer={actions.addPlayer}
+          onsubmit={this.handlePlayerAdd}
+        />
+        <AddPositionRadio
+          startPosition={this.currentPosition}
+          onpositionchange={this.handlePositionChange}
+        />
+        <PlayerList
+          players={currentList}
+          actions={actions}
+          prevCounts={(currentPage - 1)*5}
+        />
+        <Pagination
+          pageCounts={pageCounts}
+          currentPage={currentPage}
+          onselected={this.handlePageSelected}
+        />
       </div>
     );
   }

src/reducers/playerlist.js

@@ -49,9 +49,8 @@ export default function players(state = initialState, action) {
         playersById: [
           ...state.playersById,
           {
-            name: action.name,
             team: 'LOS ANGELES LAKERS',
-            position: 'SF',
+            ...action.info
           },
         ],
       };
@@ -63,6 +62,7 @@ export default function players(state = initialState, action) {
         ),
       };
     case types.STAR_PLAYER:
+      debugger
       let players = [...state.playersById];
       let player = players.find((item, index) => index === action.id);
       player.starred = !player.starred;