Javascript 反应-如果球员的得分发生变化，则在记分板上按最高得分对其进行排序

我已经建立了一个反应应用程序，这是一个记分牌。您可以使用右侧的+和-符号添加和删除玩家分数中的分数。目前，球员是按id排序的。我想找出一种根据球员当前得分对球员进行排序的方法

例如，如果一名玩家的得分高于他们之上的另一名玩家，则该玩家将向上移动到他们排名的那一行。我制作了一个代码笔来显示我的项目。如果有人知道在运行

onScoreChange

功能后如何对玩家进行排序，我将不胜感激

身体{
背景#d5d5d5；
字体系列：arial；
颜色：#FAFAFA；
文本转换：大写；
}
.记分牌{
背景：#333；
宽度：700px；
利润率：70像素自动；
盒影：0 4px 0px#333；
边界半径：15px；
}
.标题{
填充物：5px10px；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
背景色：#222；
边界半径：15px 15px 0；
边框底部：实心2px#444；
}
.标题h1{
柔性生长：1；
字号：1.5em；
字母间距：3px；
字体大小：正常；
}
.玩家{
显示器：flex；
字体大小：1.2米；
边框底部：实心2px#444；
字母间距：2px；
}
.移除播放器{
可见性：隐藏；
右边距：10px；
颜色：#e57373；
光标：指针；
}
.玩家名称：悬停。移除玩家{
能见度：可见；
}
.玩家名称{
柔性生长：1；
填充：20px 10px 10px 10px；
}
.球员得分{
宽度：190px；
背景：蓝色；
}
.柜台{
显示器：flex；
}
.反作用{
边界：无；
字体大小：粗体；
颜色：#FAFAFA；
显示：块；
填充：20px 20px；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.反作用{
背景#66BB6A；
}
.反作用.增量：悬停{
背景#549d59；
光标：指针；
}
.反作用{
背景：ef5350；
}
.反作用.减量：悬停{
背景：#c44442；
光标：指针；
}
.记分{
柔性生长：1；
背景#2b2b；
颜色：#FAFAFA；
文本对齐：居中；
字体系列：monospace；
填充：10px；
字号：2em；
}
.添加玩家表单{
显示器：flex；
背景色：#222；
边界半径：0 0 20px 20px
}
.添加播放器窗体输入[类型=文本]{
柔性生长：1；
边框宽度：0 1px 0；
利润率：15px 10px 15px 15px；
填充：10px；
边界半径：5px；
背景色：#333；
边框样式：无；
文本阴影：无；
文本转换：大写；
颜色：#999；
字母间距：2px；
大纲：无；
}
.add播放器表单输入[type=text]：-webkit输入占位符{
颜色：#666；
字母间距：2px；
}
.添加播放器窗体输入[类型=文本]：焦点{
背景色：#444；
}
.添加玩家表单输入[类型=提交]{
显示：块；
字体大小：.6em；
利润率：15px 15px 15px 0；
填充：10px；
背景色：#333；
边界半径：5px；
边界：无；
颜色：#999；
字母间距：2px；
字体大小：粗体；
文本阴影：无；
文本转换：大写；
}
.添加玩家表单输入[type=submit]：悬停{
背景：#4b71b5；
颜色：#fafafa；
光标：指针；
}
var玩家=[
{
姓名：“玛丽·米勒”，
得分：22分，
id:1，
},
{
姓名：“Ellie Grace”，
分数:20,，
id:2，
},
{
姓名：“本·派恩”，
得分：18分，
id:3，
},
{
姓名：“雷切尔·斯莱特”，
得分：17分，
id:4，
},
{
姓名：“Lisette Ven”，
得分：10分，
id:5，
},
];
var-nextId=6；
var addPlayPerform=React.createClass({
道具类型：{
onAdd:React.PropTypes.func.isRequired，
},
getInitialState:函数（）{
返回{
姓名：“，
};
},
onNameChange:函数（e）{
this.setState（{name:e.target.value}）；
},
提交人：函数（e）{
e、 预防默认值（）；
this.props.onAdd（this.state.name）；
this.setState（{name:}）；
},
render:function（）{
返回(
);
}
});
功能标题（道具）{
返回(
{props.title}
);
}
Header.propTypes={
标题：React.PropTypes.string.isRequired，
玩家：React.PropTypes.array.isRequired，
};
功能计数器（道具）{
返回(
- 
{props.score}
+ 
);
}
Counter.propTypes={
分数：React.PropTypes.number.isRequired，
onChange:React.PropTypes.func.isRequired，
}
功能播放器（道具）{
返回(
✖
{props.name}
);
}
Player.propTypes={
名称：React.PropTypes.string.isRequired，
分数：React.PropTypes.number.isRequired，
OnCoreChange:React.PropTypes.func.isRequired，
onRemove:React.PropTypes.func.isRequired，
};
var Application=React.createClass({
道具类型：{
标题：React.PropTypes.string，
初始玩家：React.PropTypes.arrayOf（React.PropTypes.shape({
名称：React.PropTypes.string.isRequired，
分数：React.PropTypes.number.isRequired，
id:React.PropTypes.number.isRequired，
})).要求，
},
getDefaultProps:function（）{
返回{
标题：“足球记分牌”，
}
},
getInitialState:函数（）{
返回{
玩家：这个。道具。初始玩家，
};
},
OnCoreChange：函数（索引，增量）{
this.state.players[index].score+=delta；
this.setState（this.state）；
},
onplayerad：函数（名称）{
这个，州，球员，推({
姓名:姓名,，
分数：0，
id:nextId，
});
this.setState（this.state）；
nextId+=1；
},
onRemovePlayer:函数（索引）{
this.state.players.splice（索引1）；
this.setState（this.state）；
},
//重排球员
render:function（）{
返回(
<div id="container"></div>
body {
  background: #d5d5d5;
  font-family: arial;
  color: #FAFAFA;
  text-transform: uppercase;
}

.scoreboard {
  background: #333;
  width: 700px;
  margin: 70px auto;
  box-shadow: 0 4px 0px #333;
  border-radius: 15px;

}

.header {
  padding: 5px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  background-color: #222;
  border-radius: 15px 15px 0 0;
  border-bottom: solid 2px #444;
}

.header h1 {
  flex-grow: 1;
  font-size: 1.5em;
  letter-spacing: 3px;
  font-weight: normal;
}

.player {
  display: flex;
  font-size: 1.2em;
  border-bottom: solid 2px #444;
  letter-spacing: 2px;
}

  .remove-player {
    visibility: hidden;
    margin-right: 10px;
    color: #e57373;
    cursor: pointer;
  }

  .player-name:hover .remove-player {
    visibility: visible;
  }

  .player-name {
    flex-grow: 1;
    padding: 20px 10px 10px 10px;
  }

  .player-score {
    width: 190px;
    background: blue;
  }

  .counter {
    display: flex;
  }

  .counter-action {
    border: none;
    font-weight: bold;
    color: #FAFAFA;
    display: block;
    padding: 20px 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .counter-action.increment {
    background: #66BB6A;
  }

  .counter-action.increment:hover {
    background: #549d59;
    cursor: pointer;
  }

  .counter-action.decrement {
    background: #ef5350;
  }

  .counter-action.decrement:hover {
    background: #c44442;
    cursor: pointer;
  }

  .counter-score {
    flex-grow: 1;
    background: #2b2b2b;
    color: #FAFAFA;
    text-align: center;
    font-family: monospace;
    padding: 10px;
    font-size: 2em;
  }


.add-player-form form {
  display: flex;
  background-color: #222;
  border-radius: 0 0 20px 20px
}

  .add-player-form input[type=text] {
    flex-grow: 1;
    border-width: 0 0 1px 0;
    margin: 15px 10px 15px 15px;
    padding: 10px;
    border-radius: 5px;
    background-color: #333;
    border-style: none;
    text-shadow: none;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 2px;
    outline: none;
  }

  .add-player-form input[type=text]::-webkit-input-placeholder{
    color: #666;
    letter-spacing: 2px;
  }

  .add-player-form input[type=text]:focus{
    background-color: #444;
  }

  .add-player-form input[type=submit] {
    display: block;
    font-size: .6em;
    margin: 15px 15px 15px 0;
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
    border: none;
    color: #999;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: none;
    text-transform: uppercase;
  }

  .add-player-form input[type=submit]:hover{
    background: #4b71b5;
    color: #fafafa;
    cursor: pointer;
  }

var PLAYERS = [
  {
    name: "Mary Miller",
    score: 22,
    id: 1,
  },
  {
    name: "Ellie Grace",
    score: 20,
    id: 2,
  },
  {
    name: "Ben Pine",
    score: 18,
    id: 3,
  },
  {
    name: "Rachel Slater",
    score: 17,
    id: 4,
  },
  {
    name: "Lisette Ven",
    score: 10,
    id: 5,
  },
];

var nextId = 6;

var AddPlayerForm = React.createClass({
  propTypes: {
    onAdd: React.PropTypes.func.isRequired,
  },

  getInitialState: function() {
    return {
      name: "",
    };
  },

  onNameChange: function(e) {
    this.setState({name: e.target.value});
  },

  onSubmit: function(e) {
    e.preventDefault();

    this.props.onAdd(this.state.name);
    this.setState({name: ""});
  },


  render: function() {
    return (
      <div className="add-player-form">
        <form onSubmit={this.onSubmit}>
          <input type="text" value={this.state.name} onChange={this.onNameChange} />
          <input type="submit" value="Add Player" />
        </form>
      </div>
    );
  }
});

function Header(props) {
  return (
    <div className="header">
      <h1>{props.title}</h1>
    </div>
  );
}

Header.propTypes = {
  title: React.PropTypes.string.isRequired,
  players: React.PropTypes.array.isRequired,
};

function Counter(props) {
  return (
    <div className="counter">
      <button className="counter-action decrement" onClick={function() {props.onChange(-1);}} > - </button>
      <div className="counter-score"> {props.score} </div>
      <button className="counter-action increment" onClick={function() {props.onChange(1);}}> + </button>
    </div>
  );
}

Counter.propTypes = {
  score: React.PropTypes.number.isRequired,
  onChange: React.PropTypes.func.isRequired,
}

function Player(props) {
  return (
    <div className="player">
      <div className="player-name">
        <a className="remove-player" onClick={props.onRemove}>✖</a>
        {props.name}
      </div>
      <div className="player-score">
        <Counter score={props.score} onChange={props.onScoreChange} />
      </div>
    </div>
  );
}

Player.propTypes = {
  name: React.PropTypes.string.isRequired,
  score: React.PropTypes.number.isRequired,
  onScoreChange: React.PropTypes.func.isRequired,
  onRemove: React.PropTypes.func.isRequired,
};



var Application = React.createClass({
  propTypes: {
    title: React.PropTypes.string,
    initialPlayers: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      score: React.PropTypes.number.isRequired,
      id: React.PropTypes.number.isRequired,
    })).isRequired,
  },

  getDefaultProps: function() {
    return {
      title: "Foosball Scoreboard",
    }
  },

  getInitialState: function() {
    return {
      players: this.props.initialPlayers,
    };
  },

  onScoreChange: function(index, delta) {
    this.state.players[index].score += delta;
    this.setState(this.state);
  },

  onPlayerAdd: function(name) {
    this.state.players.push({
      name: name,
      score: 0,
      id: nextId,
    });
    this.setState(this.state);
    nextId += 1;
  },

  onRemovePlayer: function(index) {
    this.state.players.splice(index, 1);
    this.setState(this.state);
  },

  // reorderPlayers

  render: function() {
    return (
      <div className="scoreboard">
        <Header title={this.props.title} players={this.state.players} />

        <div className="players">
          {this.state.players.map(function(player, index) {
            return (
              <Player
                onScoreChange={function(delta) {this.onScoreChange(index ,delta)}.bind(this)}
                onRemove={function() {this.onRemovePlayer(index)}.bind(this)}
                name={player.name}
                score={player.score}
                key={player.id} />
            );
          }.bind(this))}
        </div>
        <AddPlayerForm onAdd={this.onPlayerAdd} />
      </div>
    );
  }
});



ReactDOM.render(<Application initialPlayers={PLAYERS}/>, document.getElementById('container'));

onScoreChange: function(index, delta) {
    let players = [...this.state.players]

    players[index] = Object.assign({},players[index])
    // Or if you can use object spread then: players[index] = {...players[index]}
    players[index].score += delta;

    // Use Array.sort function like this
    players.sort((a,b) => b.score - a.score)
    this.setState({players});
  },