Sorting 在react中创建一个下拉列表，以显示/隐藏基于对象类的获取数据

目前我正在调用防暴游戏api并显示所有冠军。我已经添加了一个“按名称筛选”部分，但我想添加一个下拉列表以按champion类进行排序。在初始页面加载时，我希望每个champion都呈现出来（当前是这样），但是从下拉列表中选择一个类只显示拥有该类的champs。我可以向每一个冠军班展示

{champion.table.tags}

加上一个或多个索引号，这就是我想要的排序方式。如果

{champion.table.tags[0}

或

{champion.table.tags[1}

==例如“战斗机”。我希望在下拉列表中选择“战斗机”时显示每个带有“战斗机”标签的冠军

我对react非常陌生，我在Rails中构建了相同的功能，没有任何问题，但我正在努力用react的方式来实现这一点

我当前的代码显示了所有CHAMP并具有排序功能

import React, { Component } from 'react';
import { Link } from 'react-router';
import _ from 'lodash';

class Champions extends Component {
  constructor(props) {
    super(props);

    this.state = {
      champions: []
    };
  }

  componentWillMount() {
    fetch('http://localhost:3000/champ.json')
    .then(response => response.json())
    .then(champions => {
      this.setState({ champions })
    })
  }

  filter(e){
    this.setState({ filter: e.target.value} )
  }

  render() {
    let champions = this.state.champions;
    console.log('champions: ', champions);

    if(this.state.filter){
      champions = champions.filter( champion =>
      champion.table.name.toLowerCase()
      .includes(this.state.filter.toLowerCase()))
    }

    if(this.state.handleChange){
      tags = champions.handleChange( champion =>
      champion.table.tags
    .includes(this.state.handleChange()))
    }

    return (
      <div>
        <div>
          <input type="text"
                 placeholder="search for a champ"
                 onChange={this.filter.bind(this)}
          />
        </div>

        <div className="Sort">
          <select>
            {champions.map((champion, i) =>
              <option key={i}>{champion.table.tags[0]}
              </option>)}
          </select>
        </div>

      <ul className="champ-list">
        {champions.map(champion => {
          return <li key={champion.table.id} className="col-xs-3">
            <div>
              <Link to={`/${champion.table.id}`} >
              <img src={`http://ddragon.leagueoflegends.com/cdn/7.5.2/img/champion/${champion.table.image.full}`} />
              </Link>
              </div>
              <Link to={`/${champion.table.id}`} >
            <h3>{champion.table.key}</h3>
            <h4>{champion.table.title}</h4>
            <h4>{champion.table.tags}</h4>
            </Link>
          </li>
        })}
      </ul>
      </div>
    );
  }
}

export default Champions;

import React，{Component}来自'React'；
从“反应路由器”导入{Link}；
从“lodash”进口；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
冠军：[]
};
}
组件willmount（）{
取（'http://localhost:3000/champ.json')
.then（response=>response.json（））
.然后（冠军=>{
this.setState（{champions}）
})
}
过滤器（e）{
this.setState（{filter:e.target.value}）
}
render（）{
让冠军=this.state.champions；
console.log（'champions:'，champions）；
if（this.state.filter）{
冠军=冠军。过滤器（冠军=>
champion.table.name.toLowerCase（）
.includes（this.state.filter.toLowerCase（））
}
if（此.state.handleChange）{
tags=champion.handleChange（champion=>
champion.table.tags
.includes（this.state.handleChange（））
}
返回(
{champions.map（（champion，i）=>
{champion.table.tags[0]}
)}

{champion.map（champion=>{
return

{champion.table.key}
{champion.table.title}
{champion.table.tags}

})}

);
}
}
出口违约冠军；

到目前为止，下拉列表将遍历每个冠军对象，并使用每个冠军的第一个类标记填充。我认为总共可能有7个类，如果需要，我可以手动创建，但如何显示所有冠军，然后仅显示基于下拉选择的冠军

不确定这是否相关，但在React中也让我有点头疼。JSON返回一个包含134个对象（冠军）的数组。在每个对象中都有几个键值对以及更多的数组，其中包含键值对。我试图排序的类标记位于其中一个嵌套数组中

---

如果有任何帮助，甚至是正确方向上的一点，我都会非常感激。

我自己解决了这个问题。下面是更新后的代码

import React, { Component } from 'react';
import { Link } from 'react-router';
import _ from 'lodash';

class Champions extends Component {
  constructor(props) {
    super(props);

    this.state = {
      champions: [],
    };
  }


  componentWillMount() {
    fetch('http://localhost:3000/champ.json')
    .then(response => response.json())
    .then(champions => {
      this.setState({ champions })
      // console.log('setState: ', this.state.champions);
    })
  }

  filter(e){
    this.setState({filter: e.target.value})
  }

  filterChamp(e){
    this.setState({filterChamp: e.target.value})
  }


  render() {
    let champions = this.state.champions;
    // console.log(champions);
    // console.log('props: ', this.props);

    if(this.state.filter){
      champions = champions.filter( champion =>
      champion.table.name.toLowerCase()
      .includes(this.state.filter.toLowerCase()))
    }

    if(this.state.filterChamp){
      champions = champions.filter( champion =>
      champion.table.tags
      .includes(this.state.filterChamp))
    }

    return (
      <div>
        <select onChange={this.filterChamp.bind(this)} value={this.state.filterChamp}>
          <option value="">All Champs</option>
          <option value="Assassin">Assassin</option>
          <option value="Fighter">Fighter</option>
          <option value="Mage">Mage</option>
          <option value="Marksman">Marksman</option>
          <option value="Support">Support</option>
          <option value="Tank">Tank</option>
        </select>

        <input type="text"
               placeholder="search for a champ"
               onChange={this.filter.bind(this)}
        />
      <ul className="champ-list">
        {champions.map(champion => {
          return <li key={champion.table.id} className="col-xs-3">
            <div>
              <Link to={`/champ/${champion.table.name}`} >
              <img src={`http://ddragon.leagueoflegends.com/cdn/7.5.2/img/champion/${champion.table.image.full}`} />
              </Link>
              </div>
              <Link to={`/${champion.table.id}`} >
            <h3>{champion.table.key}</h3>
            <h4>{champion.table.title}</h4>
            </Link>
          </li>
        })}
      </ul>
      </div>
    );
  }
}

export default Champions;

import React，{Component}来自'React'；
从“反应路由器”导入{Link}；
从“lodash”进口；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
冠军：[]，
};
}
组件willmount（）{
取（'http://localhost:3000/champ.json')
.then（response=>response.json（））
.然后（冠军=>{
this.setState（{champions}）
//console.log（'setState:'，this.state.champions）；
})
}
过滤器（e）{
this.setState（{filter:e.target.value}）
}
滤纸夹（e）{
this.setState（{filterChamp:e.target.value}）
}
render（）{
让冠军=this.state.champions；
//console.log（冠军）；
//log（'props:'，this.props）；
if（this.state.filter）{
冠军=冠军。过滤器（冠军=>
champion.table.name.toLowerCase（）
.includes（this.state.filter.toLowerCase（））
}
if（this.state.filterChamp）{
冠军=冠军。过滤器（冠军=>
champion.table.tags
.包括（此.state.filterChamp））
}
返回(
所有冠军
莎辛那
战士
法师
射手
支持
坦克

{champion.map（champion=>{
return

{champion.table.key}
{champion.table.title}

})}

);
}
}
出口违约冠军；