pwt-first-commit

package.json

@@ -20,5 +20,10 @@
   "devDependencies": {
     "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"
+  ]
 }

src/actions/PlayersActions.js

@@ -20,3 +20,11 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function changePosition({id,position}){
+
+	return {
+		type:'change_position',
+		data:{id,position},
+	};
+}

src/components/PlayerList.js

@@ -4,14 +4,65 @@ import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
 
 class PlayerList extends Component {
+
+    state={
+		n:1
+	}
+
+	handleClick=(event)=>{
+		event.persist()
+		this.setState({n:Number(event.target.innerText)})
+
+	}
+
   render() {
+	  var totalCount=this.props.players.length//总条数
+	  var pageCount=5//每页总条数
+	  var totalPage//总页数
+	  var start,end
+	  var {n} =this.state
+	  //先计算可以分为多少页-----------------
+	  　　　　　　　　　　if(totalCount % pageCount === 0){
+	  　　　　　　　　　　　　//整除，页面为整数
+	  　　　　　　　　　　　　totalPage=totalCount/pageCount;
+	  　　　　　　　　　　}else{
+	  　　　　　　　　　　　　//有余数，页面加一
+	  　　　　　　　　　　　　totalPage=Math.ceil(totalCount/pageCount);
+	  　　　　　　　　　　}
+	  //查询页面数据--------------------------
+	  　　　　　　　　　　if(totalCount % pageCount === 0){
+	  　　　　　　　　　　　　//整除的时候每页的初始数据
+	  　　　　　　　　　　　　start=(n-1)*pageCount+1;
+	  　　　　　　　　　　　　//整除的时候每页的最后数据
+	  　　　　　　　　　　　　end=n*pageCount;
+	  　　　　　　　　　　}else{
+	  　　　　　　　　　　　　//有余数的时候查询页的初始数据
+	  　　　　　　　　　　　　start=(n-1)*pageCount+1;
+	  　　　　　　　　　　　　if(1<=n && n<totalPage){
+	      　　　　　　　　　　　　　　//有余数的时候查询页的最终数据
+	  　　　　　　　　　　　　　　　end=n*pageCount;
+	  　　　　　　　　　　　　}else{
+	  　　　　　　　　　　　　　　　//有余数的时候最后一页的最终数据
+	  　　　　　　　　　　　　　　　end=totalCount;
+	  　　　　　　　　　　　　}
+	   　　　　　　　　　　}
+
+	   var newPlayers=this.props.players.slice(start-1,end)
+	   var pages=[]
+	   for(let p=0;p<totalPage;p++){
+		   pages.push('')
+	   }
+
+
+
     return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
+	<div>
+	 <ul className={styles.playerList}>
+        {newPlayers.map((player, index) => {
           return (
             <PlayerListItem
               key={index}
-              id={index}
+              id={(n-1)*pageCount+index}
               name={player.name}
               team={player.team}
               position={player.position}
@@ -21,6 +72,15 @@ class PlayerList extends Component {
           );
         })}
       </ul>
+	  <ul style={{listStyle:'none'}}>
+		{  
+			pages.map((page,index)=>{
+				return (<li key={index}><a href="#" style={{float:'left'}} onClick={this.handleClick}>{index+1}</a></li>)
+			})
+
+		}
+	  </ul>
+	 </div>
     );
   }
 }

src/components/PlayerListItem.js

@@ -4,6 +4,16 @@ import PropTypes from 'prop-types';
 import styles from './PlayerListItem.css';
 
 class PlayerListItem extends Component {
+
+	state={position:this.props.position}
+
+	handleChange=(event)=>{
+		event.persist()
+		this.setState({position:event.target.value})
+		setTimeout(()=>this.props.changePosition({id:this.props.id,position:this.state.position}))
+
+	}
+
   render() {
     return (
       <li className={styles.playerListItem}>
@@ -36,6 +46,15 @@ class PlayerListItem extends Component {
             <i className="fa fa-trash" />
           </button>
         </div>
+		<div>
+			<select value={this.state.position} onChange={this.handleChange}>
+				<option value='SF'>SF</option>
+				<option value='PF'>PF</option>
+				<option value='PG'>PG</option>
+				<option value='SG'>SG</option>
+			</select>
+		</div>
+
       </li>
     );
   }

src/containers/PlayerListApp.js

@@ -2,7 +2,7 @@ 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, changePosition } from '../actions/PlayersActions';
 import { PlayerList, AddPlayerInput } from '../components';
 
 class PlayerListApp extends Component {
@@ -15,8 +15,10 @@ class PlayerListApp extends Component {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
+	  changePosition:this.props.changePosition,
+
     };
-
+	console.log(actions)
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
@@ -37,5 +39,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+	changePosition
   },
 )(PlayerListApp);

src/reducers/playerlist.js

@@ -70,6 +70,21 @@ export default function players(state = initialState, action) {
         ...state,
         playersById: players,
       };
+	case 'change_position':
+	  return {
+		  ...state,
+		  playersById: state.playersById.map(
+		    (item, index) =>{
+				if(index !== action.data.id)
+				return item
+				else{
+					var newitem=item
+					newitem.position=action.data.position
+					return newitem
+				}  
+				}
+		  ),
+	  }
 
     default:
       return state;