创建一个下拉列表以根据对象类显示/隐藏获取数据 [英] create a dropdown in react to show/hide fetch data based on object class

问题描述

当前，我正在调用Riot Games api并显示所有冠军。我添加了一个按名称过滤的部分，但我想添加一个下拉列表以按冠军分类。在初始页面加载时，我希望每个冠军都被渲染（当前正在这样做），但是从下拉列表中选择一个班级只会显示拥有该班级的冠军。我可以向每个冠军班展示
{champion.table.tags}
并添加一个或多个索引号，这就是我想要的能够排序。如果 {champion.table.tags [0} 或 {champion.table.tags [1} =战斗机例如。我希望在下拉菜单中选择 Fighter时显示每个带有 Fighter标签的冠军

Currently I am calling the Riot Games api and displaying all the champions. I have added a filter by name section, but i would like to add a dropdown to sort by champion class. On initial page load I want every champion rendered (which it currently does), but then selecting a class from the dropdown only show the champs that have that class. I can show each champions class with {champion.table.tags} and adding the index number or numbers and this is what i want to be able to sort by. If {champion.table.tags[0} or {champion.table.tags[1} = "Fighter" for example. I would like every champion with a tag of "Fighter" to be shown when "Fighter" is selected in the dropdown

我是个新手，我已经建立了在Rails中具有相同的功能没有任何问题，但是我正在用React的方式来解决这个问题。

I'm pretty new to react and I have built this same feature in Rails without any problem, but I'm struggling with the React way of going about this.

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

my current code that shows all champs and has a sort function

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;

到目前为止，下拉列表遍历每个冠军对象，并在每个对象中填充头等标记冠军。我认为总共可能有7个班级，我可以根据需要手动创建这些班级，但是我如何才能显示所有冠军，然后仅根据下拉列表显示那些冠军。

as of right now the dropdown goes through each champion object and populates the with the first class tag of every champion. I think there are maybe 7 classes total and I can manually create the if needed, but how can I show All of the champions and then just the ones based on the dropdown selection.

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

Not sure if this is relevant, but has also given me a bit of a headache in React. The JSON returns an array of 134 objects (champions). Inside each object are several key value pairs as well as more arrays with key value pairs inside of them. The class tags I am trying to sort by are inside of one of these nested arrays.

任何帮助，甚至正确方向的一点都将不胜感激

Any help or even a point in the right direction would be greatly appreciated

推荐答案

我自己弄清楚了。这是更新的代码

figured it out on my own. here's the updated code

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;

这篇关于创建一个下拉列表以根据对象类显示/隐藏获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！