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

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

class ProfileCard extends React.Component {
  render() {
    return (
      

        

          
          

            

              
{this.props.player.Name}
              
{this.props.player.position}, #{this.props.player.number}
              
{this.props.player.Club}
              
{this.props.player.Height} ({this.props.player.Meters} m)
              
{this.props.player.Age} years old
            
          
        
      
    );
  }
}

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 = [];
    sorted.forEach(function(player) {
      if (player.year > 2000) {
        cards.push();
      }
    });

    return (
{cards}
);
  }
}

class Sort extends React.Component {
  render() {
    return (
      

        
Sort by
        
Age
        
Height
        
Name
      
    )
  }
}

class SortablePlayerTable extends React.Component {

  render() {
    /*
    * Prefix some interestings stats
    * before roster
    */
    var ages = [], heights = [];

    this.props.players.forEach(function(player) {
      if (player.year > 2000) {
        ages.push(player.Age);
        heights.push(player.Meters);
      }
    });
    var avgAge = (ages.reduce( (a, b) => a + b) / 12).toPrecision(3);
    var avgHeights = (heights.reduce( (a, b) => a + b) / 12).toPrecision(3);

    // Return page with stats data and Roster
    return (
      

        
2012 Olympic Men's Basketball Team
        
Average Age: {avgAge} years old
        
Average Height: 6 ft 7 in ({avgHeights} m)
        
        
      
    );
  }
};

React.render(
  ,
  document.getElementById('container')
);

解:

让我在前往此途中的另一件事是我失去了访问权限this.setState,不断收到this.setState is a not a function错误.使用ES6箭头函数来词法绑定this我的处理程序函数虽然救了我.

class ProfileCard extends React.Component {
  render() {
    return (
      

        

          
          

            

              
{this.props.player.Name}
              
{this.props.player.position}, #{this.props.player.number}
              
{this.props.player.Club}
              
{this.props.player.Height} ({this.props.player.Meters} m)
              
{this.props.player.Age} years old
            
          
        
      
    );
  }
}

class Roster extends React.Component {
  render() {
    // Create player cards from sorted, dynamic JSON collection
    var cards = [];
    this.props.players.forEach(function(player) {
      if (player.year > 2000) {
        cards.push();
      }
    });

    return (
{cards}
);
  }
}

class Sort extends React.Component {
  sortRoster(field){
    var players = this.props.players;
    this.props.sortRosterStateBy(field, players);
  }
  render() {
    return (
      

        
Sort by
        
Age
        
Height
        
Name
        
Position
        
Number
        
Club
      
    )
  }
}

class SortablePlayerTable extends React.Component {
  state = {
   'players': this.props.players // default state
  }

  sortRosterStateBy = (field, players) => {
    // Sorting ...
    var sortedPlayers = players.sort( (a, b) => {
      if (a[field] > b[field]) {
        return 1;
      }
      if (a[field] < b[field]) {
        return -1;
      }
      return 0;
    });

    // Then call setState
    this.setState({'players': sortedPlayers});
  }

  render() {
    // Prefix some interestings stats before roster
    var ages = [], heights = [];
    this.props.players.forEach(function(player) {
      if (player.year > 2000) {
        ages.push(player.Age);
        heights.push(player.Meters);
      }
    });
    var avgAge = (ages.reduce( (a, b) => a + b) / 12).toPrecision(3);
    var avgHeight = (heights.reduce( (a, b) => a + b) / 12).toPrecision(3);

    // Return page with stats data and Roster
    return (
      

        
2012 Olympic Men's Basketball Team
        
Average Age: {avgAge} years old
        
Average Height: 6 ft 7 in ({avgHeight} m)
        
        
      
    );
  }
};

ReactDOM.render(
  ,
  document.getElementById('container')
);

Naisheel Ver.. 13

附加的功能,每一个

class Sort extends React.Component {
  sort(field){
    this.props.sortBy(field);
  }
  render() {
    return (
      

        
Sort by
        
Age
        
Height
        
Name
      
    )
  }
}

class SortablePlayerTable extends React.Component {
  state = {
   players: [] // default state
  }
  sortBy(field){
    // Your sorting algorithm here
    // it should push the sorted value by field in array called sortedPlayers 
    // Then call setState
    this.setState({
      players: sortedPlayers
    });
  }
  render() {
    // calculate stats
    return (
      

        {/* some JSX */}
        
        
      
    );
  }
};

class Sort extends React.Component {
  sort(field){
    this.props.sortBy(field);
  }
  render() {
    return (
      

        
Sort by
        
Age
        
Height
        
Name
      
    )
  }
}

class SortablePlayerTable extends React.Component {
  state = {
   players: [] // default state
  }
  sortBy(field){
    // Your sorting algorithm here
    // it should push the sorted value by field in array called sortedPlayers 
    // Then call setState
    this.setState({
      players: sortedPlayers
    });
  }
  render() {
    // calculate stats
    return (
      

        {/* some JSX */}
        
        
      
    );
  }
};

依然-狠幸福

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• actionscrip
• bash
• c#
• c++
• c语言
• erlang
• flutter
• go
• golang
• java
• javascript
• lua
• node.js
• perl
• php
• python
• scala
• typescript

RankList | 热门文章

• 1为什么这个字符串不会溢出缓冲区？
• 2Zuul Edge Server可以在没有Eureka/Ribbon的情况下使用
• 3替换String中的变量
• 4明确说明引用的向量长度类型
• 5Sitecore 8:更改子布局的数据源模板
• 6在Windows上设置docker时出错
• 7在SWRevealViewController上的didselect tableview上出错
• 8如何在vi编辑器中搜索带空格和特殊字符的字符串
• 9如何获取当前位置和拨出电话摘机时间(确切的呼叫选择时间)？
• 10Python字典未正确更新
• 11通过RESTful API部署Tensorflow模型的示例
• 12如何在首次启动时显示离子中的应用指令
• 13Angular 2,Visual Studio 2015更新1,类型脚本配置
• 14如何在Google自定义搜索中指定图像类型
• 15Postgres创建/恢复在亚马逊ec2上花费了大量时间
• 16带有多个跨度的文本溢出省略号
• 17如何在动态生成的表行jquery中添加和操作id
• 18如何检测无法在android中连接wifi？
• 19添加按钮到以编程方式创建的UIView
• 20如何从主目录访问产品风味类？