javascript - React可排序表不排序

Question

这里是新的 React 开发人员。我正在尝试创建一个可排序的表，为了开始，我捕获了 the following codepen example这是一个很好的开始。由此，我剥离了一些东西并制作了以下简短的表格:

// Player Ranking Table Component
class PlayerRankings extends React.Component {
  constructor(props) {
    super(props);
  }

  generateRankData() {
    var data = [{rank: 1, week: 3, month: 2, player: "Steph", pos: "PG", team: "Warriors", war: 6, ws: 5.2}, {rank: 2, week: -1, month: -1, player: "Mike", pos: "PG", team: "Warriors", war: -4, ws: 5.2}, {rank: 3, week: 13, month: 5, player: "Paul", pos: "SG", team: "Knicks", war: 3, ws: 4.8}];
    
    return data;
  }
  render() {
    
    let rankData = this.generateRankData()
    let tableRows = rankData.map(row => (
      <tr>
        <td>{row.rank}</td>
        <td>{row.week}</td>
        <td>{row.month}</td>
        <td>{row.player}</td>
        <td>{row.pos}</td>
        <td>{row.team}</td>
        <td>{row.war}</td>
        <td>{row.ws}</td>
      </tr>
    ));
    
    // Here's my table
    let mytable = 
        <div id='rankings'>
          <table>
            <thead>
              <tr>
                <th><button className="sort" data-sort="rank">Rank</button></th>
                <th><button className="sort" data-sort="week">1-Week Change</button></th>
                <th><button className="sort" data-sort="month">1-Month Change</button></th>
                <th><button className="sort" data-sort="player">Player</button></th>
                <th><button className="sort" data-sort="position">Position</button></th>
                <th><button className="sort" data-sort="team">Team</button></th>
                <th><button className="sort" data-sort="war">WAR</button></th>
                <th><button className="sort" data-sort="ws">WS</button></th>
                <th><input className="search" placeholder="Search" /></th>

              </tr>
            </thead>     
            <tbody className='list'>
              {tableRows}
            </tbody>
          </table>
          <ul className="pagination"></ul>
        </div>

        
    var options = {
      valueNames: ['rank', 'week', 'month', 'player', 'position', 'team', 'war', 'ws']
    };
    
    var composersList = new List('rankings', options);
     
    return(
      <div>
        {mytable}
      </div>
    )
  }
}


ReactDOM.render(
  <PlayerRankings />,
  document.getElementById('root')
);

tr {
   border-bottom: 10px solid #CCC;
}

td {
  padding: 10px;
}


/* Style Table Headers */
.sort, button {
  padding: 8px 25px;
  border: none;
  display: inline-block;
  color: black;
  background-color: transparent;
  text-decoration: none;
  height: 30px;
  font-size: 0.9em;
  font-weight: bold;
}

.sort:hover {
  text-decoration: none;
  background-color: #DDD;
}

.sort:focus {
  outline: none;
}

.sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

input.search {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'>

<script src="http://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id='root'> </div>

不幸的是，由于“列表未定义”错误，我的代码片段根本无法在这里工作，这使我很难展示我的实际问题，这就是为什么我无法通过单击来对列表进行排序标题。 (“列表未定义”错误没有在我的计算机本地发生，但是列表没有在本地对我进行排序，这就是错误)。排序在我链接的代码笔中有效，但在我的代码中无效。

任何帮助让代码片段在这里工作，然后帮助解决为什么我的表没有排序，将不胜感激。在那之前我会继续努力。

谢谢!

Answer 1

要实现排序，您应该进行以下更改:

1. 使用 componentDidMount 生命周期 Hook 对表进行排序

   componentDidMount() {
       var options = {
          valueNames: ['rank', 'week', 'month', 'player', 'position', 'team', 'war', 'ws']
       };
       var composersList = new List('rankings', options);
   }
   

2. 为每个<td>分配要排序的列的className

   let tableRows = rankData.map(row => (
      <tr>
         <td className="rank">{row.rank}</td>
         ... more ...
      </tr>
   ));
   

代码示例 - https://codepen.io/nagasai/pen/KRmzYg