我正在尝试通过编写类似于体育名册的小型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将过滤器应用于WordPress短代码输出
• 2与填充的传单边界
• 3EMV离线批准/拒绝
• 4如何测试ViewController的Deinit
• 5Logicify jQuery位置选择器插件 - 以编程方式设置位置
• 6如何让inputAccessoryView锚定在UITabBar之上？
• 7在bash脚本中从grep打印输出会产生损坏的字符串
• 8在使用redux构建React应用程序时,何处存储WebRTC流
• 9"在arraylist构造函数中没有为add(java.lang.String)找到合适的方法吗？
• 10rails link_to使用get而不是post
• 11Rmarkdown - 在文档中运行代码并显示错误
• 12在Ubuntu 15.04上使用Mono导入库错误
• 13传递属于self的函数是否会在不在闭包中时导致保留周期？
• 14使用python Bokeh分组条形图更改条形宽度？
• 15ggplotting时,有序数据帧的顺序不同
• 16使用类中的函数初始化变量
• 17如何在flexbox中以不同方式对齐特定的<div>？
• 18如何等待任务完成Task.WhenAll？
• 19获取创建日期超过14天的行
• 20如何在visual studio 2015中使用roslyn c#编译器？