小编Sil*_*obi的帖子

我正在尝试通过编写类似于体育名册的小型UI来学习React概念,特别是re:状态和动态UI.我已经包含了下面的代码,整个app + visual在http://codepen.io/emkk/pen/dGYXJO.这个应用程序基本上从我之前定义的玩家对象阵列创建玩家卡.

我想在点击按钮时实现播放器卡的排序.我创建了一个<Sort/>呈现所述按钮的组件.我会附加事件监听器,但不知道如何在我的<Roster/>组件中反映出来.我已经尝试了许多不同的方法,this.state但似乎无法让这个工作.所以,任何有关实施分类或一般建议的帮助都会受到很大的帮助!

class ProfileCard extends React.Component {
  render() {
    return (
      <section className="profile-card">
        <figure>
          <img src={this.props.player.picURL} alt={this.props.player.Name}></img>
          <article>
            <ul>
              <li>{this.props.player.Name}</li>
              <li>{this.props.player.position}, #{this.props.player.number}</li>
              <li>{this.props.player.Club}</li>
              <li>{this.props.player.Height} ({this.props.player.Meters} m)</li>
              <li>{this.props.player.Age} years old</li>
            </ul>
          </article>
        </figure>
      </section>
    );
  }
}

class Roster extends React.Component {
  render() {

    // Store sorted version of data
    // Where I'd implement selected sorting
    var sorted = this.props.players.sort();

    /*
    * Create player cards from JSON collection
    */
    var cards …