Реакция Кнопка Фильтр отключает входной фильтр

Question

Я собираюсь предисловие к этому, я полный Noob с React, только играл с ним в течение недели, и я в порядке с Javascript, поэтому вы, вероятно, увидите ужасный код.

У меня возникла проблема с некоторыми функциями фильтрации. У меня есть вход, где я могу отфильтровать заголовки, и это работает отлично. У меня также есть фильтрация кнопок, которая также работает, за исключением тех случаев, когда я выбираю все. Когда я выбираю кнопку «Все», фильтрация кнопок все еще работает, но фильтрация ввода больше не работает.

Что я делаю неправильно? Я предполагаю, что самая большая проблема в моей функции _hasData, где я выполняю условие if.

Если вы не хотите, чтобы проверить API event_type будет возвращать либо performance, package или flex package.

Любая помощь будет оценена по достоинству. Благодарности

ButtonFilter.js

var ButtonFilter = React.createClass({ 
    handleFilterChange: function(index) { 
    var value = $(this.getDOMNode()).children('div:nth-child(' + index + ')').children().attr('data-type'); 
    this.props.updateFilter(value); 
    }, 
    render: function() { 
    return (
     <div className="button-group button-group--horizontal"> 
     <div className="button-group__item"> 
      <button className="button list button--active" data-type="all" ref="filterButton" onClick={this.handleFilterChange.bind(this, 1)}>All</button> 
     </div> 
     <div className="button-group__item"> 
      <button className="button calendar-view" data-type="performance" ref="filterButton" onClick={this.handleFilterChange.bind(this, 2)}>Performances</button> 
     </div> 
     <div className="button-group__item"> 
      <button className="button calendar-view" data-type="package" ref="filterButton" onClick={this.handleFilterChange.bind(this, 3)}>Packages</button> 
     </div> 
    </div> 
    ) 
    } 
}); 

SearchFilter.js

var SearchFilter = React.createClass({ 
    handleFilterChange: function() { 
    var value = React.findDOMNode(this).value; 
    this.props.updateFilter(value); 
    }, 
    render: function() { 
    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Start typing..." />; 
    } 
}); 

Events.js

var List = React.createClass({ 
    render: function() { 
    var content; 
    if (this.props.items.length > 0) { 
     var items = this.props.items.map(function(item) { 
     return (
      <div className="list-item" key={item.event_id}> 
      <div className="list-info"> 
       <div className="list-info__venue"> 
       <h5 className="event-title"> 
        <a href="#">{item.event_name} 
        <If condition={item.event_type != 'Performance'}> 
         <span className="event-type__badge">{item.event_type}</span> 
        </If> 
        </a> 
       </h5> 
       <span className="event-details">{item.event_date} | {item.event_venue}</span> 
       </div> 
      </div> 
      </div> 
     ) 
     }); 

     content = {items} 
    } else { 
     content = <p>No items matching this filter</p>; 
    } 

    return (
     <div> 
      {content} 
     </div> 
    ); 
    } 
}); 

var ListContainer = React.createClass({ 
    getInitialState: function() { 
    return { 
     data: [], 
     nameFilter: '', 
     typeFilter: '' 
    }; 
    }, 

    componentWillMount: function() { 
    this.loadEvents('http://private-4dfdc-ember26.apiary-mock.com/questions'); 
    }, 

    loadEvents: function(url) { 
    $.ajax({ 
     url: url, 
     dataType: 'json', 
     success: function(data) { 
     this.setState({ 
     data: data 
     }); 
    }.bind(this), 
    error: function(xhr, status, err, data) { 
     console.error(this.props.url, status, err.toString()); 
    }.bind(this) 
    }); 
    }, 

    inputFilterUpdate: function(filterValue) { 
    this.setState({ 
     nameFilter: filterValue 
    }); 
    }, 

    buttonFilterUpdate: function(typeValue) { 
    this.setState({ 
     typeFilter: typeValue 
    }); 
    }, 

    _hasData: function() { 
    var displayedItems = this.state.data.filter(function(item) { 
     var match = item.event_name.toLowerCase().indexOf(this.state.nameFilter.toLowerCase()) || item.event_type.toLowerCase().indexOf(this.state.typeFilter.toLowerCase()); 

     if (this.state.typeFilter.toLowerCase() == 'all') { 
     return true; 
     } 

     return (match !== -1); 
    }.bind(this)); 

    return (
     <div> 
     <div className="sub__nav"> 
      <div className="search"> 
      <i className="fa fa-times"></i> 
      <SearchFilter updateFilter={this.inputFilterUpdate} /> 
      </div> 
      <ButtonFilter updateFilter={this.buttonFilterUpdate} /> 
     </div> 
     <div className="list-view"> 
      <h6 className="list-view__title">Upcoming</h6> 
      <List items={displayedItems} /> 
     </div> 
     </div> 
    ); 
    }, 

    render: function() { 
    if (this.state.data) { 
     return (
     <div> 
      {this._hasData()} 
     </div> 
    )   
    } else { 
     return <div>Loading...</div>; 
    } 

    return false 
    } 
}); 

Answer 1

Чтобы удовлетворить оба фильтра и типа перепускной фильтр, если установлен в 'все', вы можете сделать это:

var displayedItems = this.state.data.filter(function(item) { 
    var eventName = item.event_name.toLowerCase(), 
     eventNameFilter = this.state.nameFilter.toLowerCase(), 
     eventType = item.event_type.toLowerCase(), 
     eventTypeFilter = this.state.typeFilter.toLowerCase(); 

    return eventName.indexOf(eventNameFilter) > -1 && 
     (eventTypeFilter === 'all' || eventType.indexOf(eventTypeFilter) > -1; 
}.bind(this));